Skip to main content

Initialize Sequential Workflow Designer with Svelte

The designer is written in TypeScript with no dependencies, but to increase a developer experience we prepared a dedicated package for Svelte. The package wraps a native component and provides a Svelte style syntax.


Check our online examples.

🚀 Installation

Install the following packages by NPM command:

npm i sequential-workflow-designer sequential-workflow-designer-svelte

Add CSS files to your global CSS file:

@import 'sequential-workflow-designer/css/designer.css';
@import 'sequential-workflow-designer/css/designer-light.css';
@import 'sequential-workflow-designer/css/designer-dark.css';

🎬 Usage

Import the component:

import { SequentialWorkflowDesigner } from 'sequential-workflow-designer-svelte';

Load or create a new definition:

import type { Definition } from 'sequential-workflow-designer';

let definition: Definition = { ... };

If you want to read the validation status create a new variable:

let isValid: boolean | null = null;

To receive definition changes create a new function:

function onDefinitionChanged({ detail }: { detail: { definition: Definition, isValid: boolean } }) {
definition = detail.definition;
isValid = detail.isValid;

Define your configuration:

import type { StepsConfiguration, ToolboxConfiguration, ValidatorConfiguration } from 'sequential-workflow-designer';

const steps: StepsConfiguration = { /* ... */ };
const toolbox: ToolboxConfiguration = { /* ... */ };
const validator: ValidatorConfiguration = { /* ... */ };

Now you can use the component:

validator={validator} />

Next you may need to create editors for your definition. You need to create a new component for the root editor and the step editor. Each editor has predefined props.

The root editor:

<script lang="ts">
import type { RootEditorContext, Definition } from 'sequential-workflow-designer';

export let context: RootEditorContext;
export let definition: Definition;
export let isReadonly: boolean;
let velocity =;

function onVelocityChanged(event: Event) {
velocity = parseInt(( as HTMLInputElement).value); = velocity;

<input type="number" value={String(velocity)} on:input={onVelocityChanged} />

The step editor:

<script lang="ts">
import type { StepEditorContext, Definition, Step } from 'sequential-workflow-designer';

export let context: StepEditorContext;
export let definition: Definition;
export let step: Step;
export let isReadonly: boolean;

let name =;

function onNameChanged(event: Event) {
name = ( as HTMLInputElement).value; = name;

<input value={name} on:input={onNameChanged} />

Import your components and set them to the designer:

<script lang="ts">
import StepEditor from './step-editor.svelte';
import RootEditor from './root-editor.svelte';

rootEditor={RootEditor} />

That's it! Now you can use the designer in your Svelte application.

🚧 Demo Project

Check the demo project.