Skip to main content

Initialize Sequential Workflow Editor with JavaScript or TypeScript

In this tutorial we will show you how to initialize the Sequential Workflow Editor with JavaScript or TypeScript.

🚀 Installation

Install the sequential-workflow-editor-model package in your front-end project or your common project for front-end and back-end (check this article):

npm i sequential-workflow-editor-model

Install the sequential-workflow-editor package in your front-end project:

npm i sequential-workflow-editor

🎬 Usage

At the beginning you need to create a model of your workflow for the editor. In this short tutorial let's consider the following workflow:

import { Definition, Step } from 'sequential-workflow-model';

export interface MyDefinition extends Definition {
properties: {
inputs: VariableDefinitions;

export interface LogStep extends Step {
type: 'log';
componentType: 'task';
properties: {
message: string;

Now we can create a model for the step:

import { createStepModel, createStringValueModel } from 'sequential-workflow-editor-model';

export const logStepModel = createStepModel<LogStep>('log', 'task', step => {'message')
minLength: 1
.label('Message to log');

If your workflow contains global properties you can create a root model:

import { createRootModel, createVariableDefinitionsValueModel } from 'sequential-workflow-editor-model';

export const rootModel = createRootModel<MyDefinition>(root => {'inputs')

Now we can create a definition model:

import { createDefinitionModel } from 'sequential-workflow-editor-model';

export const definitionModel = createDefinitionModel<MyDefinition>(model => {
model.valueTypes(['string', 'number']);

To create an editor provider you need to pass a definition model to the EditorProvider.create method. The provider requires a unique identifier generator. You can use the Uid class from the sequential-workflow-designer package.

import { EditorProvider } from 'sequential-workflow-editor';
import { Uid } from 'sequential-workflow-designer';

export const editorProvider = EditorProvider.create(definitionModel, {

We have everything to attach the editor provider to a designer. For the Sequential Workflow Designer you need to pass the following options:

import { Designer } from 'sequential-workflow-designer';

const designer: Designer<MyDefinition> = Designer.create(placeholder, startDefinition, {
editors: {
globalEditorProvider: editorProvider.createRootEditorProvider(),
stepEditorProvider: editorProvider.createStepEditorProvider()
validator: {
step: editorProvider.createStepValidator(),
root: editorProvider.createRootValidator()
// ...

That's it! Check the source code of our demo to see the final code.