open-index/open-npm huggingface dataset:
npm package: @splitflow/designer
Description: Splitflow designer tool
Author: team@splitflow.io
Latest version: 2.3.0

# SpliFlow

[SplitFlow](https://splitflow.io) is a no-code editor which allows designers to style web based applications.

- :heart: Built for UI designers.
- :sparkles: JS Framework agnostic.
- :snowflake: Embedded into your app.
- :zap: Real time styling.

![SplitFlow style editor](https://github.com/splitflow/splitflow/blob/master/public/editor.png?raw=true)

## Demo and example

Visit [splitflow.io](https://splitflow.io) to play with the style editor or check the [example](https://github.com/splitflow/designer/tree/master/src/example) page.

## Getting started

### Install SplitFlow

```
npm install @splitflow/designer
```

### Initialize the SplitFlow designer

```ts
import { initializeSplitflowDesigner } from '@splitflow/designer'
...
initializeSplitflowDesigner({ devtool: true })
```

### Register your component classes

```ts
import { createStyle } from '@splitflow/designer';
...
const style = createStyle('MyComponentName');
...
<div class={style.root()}>
    <h1 class={style.title()}>Title</h1>
</div>
```

Caution : The root element of a component must be styled with the `root` keyword.

### Launch your app and start styling!

SplitFlow style editor is displayed within your app as an overlay. Any element registered with the `createStyle` API can be styled.

Caution : at this stage, your design is not persisted and will be discarded on page reload. Add your API key!

## React styled-components built in support

SplitFlow handles most of the styling, but sometimes developers need to have control on some CSS declarations. The most common use case are animations which remain within the developers responsibility.

```ts
import { createStyle } from '@splitflow/designer/react';
import styled from 'my-preferred-styled-components-lib';
...
const Style = createStyle('MyComponentName', {
    Root: 'div',
    Title: styled.div({
        fontWeight: 600
    })
});
...
<Style.Root>
    <Style.Title>Title</Style.Title>
</Style.Root>
```

## Add your API key

### Request your project id

Request a project id on https://splitflow.io/preview

### Initialize SplitFlow

```
initializeSplitflowDesigner({ projectId: '<my-project-id>', devtool: true })
```

## Going to production

### Generate your css file

SplitFlow CLI allows to generate your app CSS.

```
npm install @splitflow/cli -D
npx @splitflow/cli css --projectId=<my-project-id>
```

Alternatively, you can create a `splitflow.config.json` and run `npx @splitflow/cli css`

```json
{
    "projectId": "<my-project-id>"
}
```

### Disable the designer devtool

```ts
if (process.env.NODE_ENV === 'development')
    initializeSplitflowDesigner({ devtool: true })
}
```
npm package: @splitflow/editor
Description: Splitflow editor
Author: team@splitflow.io
Latest version: 1.2.0

# create-svelte

Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).

Read more about creating a library [in the docs](https://kit.svelte.dev/docs/packaging).

## Creating a project

If you're seeing this, you've probably already done this step. Congrats!

```bash
# create a new project in the current directory
npm create svelte@latest

# create a new project in my-app
npm create svelte@latest my-app
```

## Developing

Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.

## Building

To build your library:

```bash
npm run package
```

To create a production version of your showcase app:

```bash
npm run build
```

You can preview the production build with `npm run preview`.

> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

## Publishing

Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).

To publish your library to [npm](https://www.npmjs.com):

```bash
npm publish
```