Sequential Workflow Designer is an MIT-licensed, dependency-free TypeScript component that embeds a customizable, flowchart-style workflow editor into web applications, built for developers creating no-code, low-code, agent-builder, or flow-based programming tools.

What it is

Sequential Workflow Designer is a front-end component, published in the Productivity & Utilities / Automation category, that renders an editable sequential workflow diagram inside a web application. It is written in pure TypeScript and draws with SVG. It has no external dependencies, and it is not tied to any workflow engine: the README states plainly that the designer is fully generic, so it can back anything from a graphical programming language to a workflow builder. Definitions are stored as JSON, and the component ships with bindings for Angular, React, and Svelte.

The concrete problem it solves is the cost of writing a workflow editor from scratch. Teams that need an end user to arrange ordered steps, branches, and conditions normally have to build drag-and-drop canvas logic, selection state, theming, and serialization themselves before writing a single line of their actual product. This component replaces that bespoke editor layer. It lives in the JavaScript and TypeScript ecosystem on npm as sequential-workflow-designer, and it deliberately stops at editing — what the JSON definition means, and what executes it, stays with the application.

Key capabilities

• Zero external dependencies, written in pure TypeScript and rendered with SVG.
• Engine-agnostic and fully generic: the README describes it as not associated with any workflow engine.
• Workflow definitions are stored as JSON, so they can be persisted, diffed, or sent to a backend.
• Ships with light, dark, and soft themes, with customization supported.
• Framework bindings provided for Angular, React, and Svelte.
• Runs in modern browsers and on mobile devices.
• Working examples cover triggers, fullscreen mode, image filter, particles, internationalization (i18n), light/dark switching, code generator, rendering test, stress test, editing restrictions, scrollable page, multi-conditional switch, auto-select, and step changes detection.

Who uses it and how

• Product teams building no-code or low-code platforms that let non-developers assemble ordered processes, using the editing-restrictions example to control what end users may change.
• Developers building agent builders and AI design tools, matching the agent-builder, agentflow, and ai-designer topics.
• Front-end teams embedding the designer in an existing Angular, React, or Svelte application rather than a standalone product, using the published bindings.
• Products shipping to multiple locales, which the i18n example addresses directly.
• Applications that must handle large diagrams, validated by the stress test and rendering test examples.

Getting started

Install the npm package sequential-workflow-designer and follow the documentation at nocode-js.com/docs, which covers the category for this designer. Demo applications for Angular, React, and Svelte, plus a live testing example, are linked from the README.

How it compares

No comparable or competing tools are named in the facts provided, so this project stands alone in this registry. The only related paid offering named is the project's own pro version, which provides additional components such as custom step types, a popup editor, copy paste, collapsible regions, goto, and custom themes.

When to use it — and when not to

Choose it when the hard part is the editor itself and the application already owns the execution model, since the component performs no execution, scheduling, or retry logic and leaves persistence of the JSON definitions to the host application. Do not choose it if you want a workflow engine, a scheduler, or a hosted backend out of the box, because none of those are part of this package. Also note the split licensing: several advanced components sit behind the paid pro version, so a project needing custom step types, popup editing, or copy paste must budget for that tier.

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

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

// ...
Designer.create(placeholder, definition, configuration);

<head>
  ...
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/designer.css" rel="stylesheet" />
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/designer-light.css" rel="stylesheet" />
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/designer-dark.css" rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.umd.js"></script>
</head>

sequentialWorkflowDesigner.Designer.create(placeholder, definition, configuration);

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

const placeholder = document.getElementById('placeholder');

const definition = {
  properties: {
    myProperty: 'my-value',
    // root properties...
  },
  sequence: [
    // steps...
  ],
};

const configuration = {
  theme: 'light', // optional, default: 'light'
  isReadonly: false, // optional, default: false
  undoStackSize: 10, // optional, default: 0 - disabled, 1+ - enabled

  steps: {
    // all properties in this section are optional

    iconUrlProvider: (componentType, type) => {
      return `icon-${componentType}-${type}.svg`;
    },

    isDraggable: (step, parentSequence) => {
      return step.name !== 'y';
    },
    isDeletable: (step, parentSequence) => {
      return step.properties['isDeletable'];
    },
    isDuplicable: (step, parentSequence) => {
      return true;
    },
    canInsertStep: (step, targetSequence, targetIndex) => {
      return targetSequence.length  {
      return !step.properties['isLocked'];
    },
    canDeleteStep: (step, parentS