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.

Examples

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:

<SequentialWorkflowDesigner
  theme="light"
  definition={definition}
  on:definitionChanged={onDefinitionChanged}
  steps={steps}
  toolbox={toolbox}
  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 = definition.properties.velocity;

  function onVelocityChanged(event: Event) {
    velocity = parseInt((event.target as HTMLInputElement).value);
    definition.properties.velocity = velocity;
    context.notifyPropertiesChanged();
  }
</script>

<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 = step.name;

  function onNameChanged(event: Event) {
    name = (event.target as HTMLInputElement).value;
    step.name = name;
    context.notifyNameChanged();
  }
</script>

<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';
</script>

<SequentialWorkflowDesigner
  ...
  stepEditor={StepEditor}
  rootEditor={RootEditor} />

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

🚧 Demo Project

Check the demo project.