Skip to content

React Component

Embed Workflow Builder in any React app.

Requirements

Section titled “Requirements”
  • React 18 or 19
  • @xyflow/react 12 or higher
  • ESM-compatible bundler (Vite, Webpack 5, Next.js, Parcel)

Known limitations

Section titled “Known limitations”

Installation

Section titled “Installation”

Install the SDK along with its peer dependencies:

Terminal window
npm install @workflowbuilder/sdk react react-dom @xyflow/react @jsonforms/core @jsonforms/react i18next react-i18next i18next-browser-languagedetector immer zustand

The SDK ships its non-peer dependencies bundled inside dist/, so the peer list above is everything you need to install yourself. React, xyflow, JsonForms, i18next, immer and zustand are kept external because they expose singletons (store identity, i18next instance, frozen-object caches) — your app and the SDK must share a single copy of each.

Usage

Section titled “Usage”

The SDK exposes a single compound component, WorkflowBuilder. Mount <WorkflowBuilder.Root> at the top of your editor subtree; with no children it renders the default layout (top bar, palette, canvas, properties panel).

<WorkflowBuilder.Root> takes a small set of optional props. See Configuring the editor for the full props reference and for composing a custom layout, or the auto-generated API reference.

Hello world

Section titled “Hello world”
import { WorkflowBuilder } from '@workflowbuilder/sdk';


import '@workflowbuilder/sdk/style.css';


function App() {
  return (
    <WorkflowBuilder.Root
      name="my-workflow"
      layoutDirection="DOWN"
      nodeTypes={
        [
          /* PaletteItemOrGroup[] */
        ]
      }
      integration={{
        strategy: 'props',
        onDataSave: async (data) => {
          console.log('Saving:', data);
          return 'success';
        },
      }}
    />
  );
}

TypeScript

Section titled “TypeScript”

All public types are exported from @workflowbuilder/sdk. The full API Reference is generated by TypeDoc directly from the SDK source on every docs build, so it never drifts.

Next steps

Section titled “Next steps”