Skip to main content

Initialize Sequential Workflow Designer with React

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

Examples

Check our online examples.

🚀 Installation​

Install the following packages by NPM command:

npm i sequential-workflow-designer sequential-workflow-designer-react

Add CSS files to your app:

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 types:

import {
  Definition,
  ToolboxConfiguration,
  StepsConfiguration,
  ValidatorConfiguration
} from 'sequential-workflow-designer';
import {
  SequentialWorkflowDesigner,
  wrapDefinition,
  useRootEditor,
  useStepEditor
} from 'sequential-workflow-designer-react';

Create or load your definition of a workflow.

const startDefinition: Definition = { /* ... */ };

Wrap the start definition and memorize it.

const [definition, setDefinition] = useState(() => wrapDefinition(startDefinition));

Configure the designer.

const toolboxConfiguration: ToolboxConfiguration = useMemo(() => ({ /* ... */ }), []);
const stepsConfiguration: StepsConfiguration = useMemo(() => ({ /* ... */ }), []);
const validatorConfiguration: ValidatorConfiguration = useMemo(() => ({ /* ... */ }), []);

Create the root editor component:

function RootEditor() {
  const { properties, setProperty, definition, isReadonly } = useRootEditor();

  function onSpeedChanged(e) {
    setProperty('speed', e.target.value);
  }

  return (
    <>
      <h3>Speed</h3>
      <input value={properties['speed'] || ''} onChange={onSpeedChanged} />
    </>
  );
}

Create the step editor component:

function StepEditor() {
  const { type, componentType, name, setName, properties, setProperty, definition, isReadonly } = useStepEditor();

  function onNameChanged(e) {
    setName(e.target.value);
  }

  return (
    <>
      <h3>Name</h3>
      <input value={name} onChange={onNameChanged} />
    </>
  );
}

At the end attach the designer.

<SequentialWorkflowDesigner
  definition={definition}
  onDefinitionChange={setDefinition}
  stepsConfiguration={stepsConfiguration}
  validatorConfiguration={validatorConfiguration}
  toolboxConfiguration={toolboxConfiguration}
  controlBar={true}
  contextMenu={true}
  rootEditor={<RootEditor />}
  stepEditor={<StepEditor />}>
  />

You can hide any UI component.

<SequentialWorkflowDesigner
  // ...
  toolboxConfiguration={false}
  controlBar={false}
  contextMenu={false}
  rootEditor={false}
  stepEditor={false}>
  />

That's it!

Next.js​

The designer is fully front-end component, to use it with Next.js you need to be sure the code won't be executed on the server side. We recommend to create a dedicated component that is importing the designer.

// MyDesigner.tsx
import { SequentialWorkflowDesigner } from 'sequential-workflow-designer-react';

export default function MyDesigner(props: MyDesignerProps) {
  return <SequentialWorkflowDesigner ... />;
}

Then import the component in your page by using the dynamic feature. You need to disable the server side rendering by setting the ssr: false option.

// FlowEditor.tsx
const MyDesigner = dynamic(() => import('./MyDesigner'), { ssr: false });

export default function FlowEditor(props: FlowEditorProps) {
  return <MyDesigner ... />;
}

🚧 Demo Project​

Check the demo project.