Architecture

Tech stack

Concern	Library
UI library	React
UI components	Overflow UI
Diagram engine	React Flow (xyflow)
State management	Zustand
Dynamic forms	JSONForms
Build tool	Vite
Language	TypeScript

All libraries are open-source with no additional license purchase required.

Monorepo structure

The project is a pnpm workspace monorepo:

apps/
├── frontend/       # Core React app (the workflow editor)
├── frontend-e2e/   # End-to-end tests
├── docs/           # This documentation site (Astro + Starlight)
├── icons/          # Lazy-loadable icon system
├── types/          # Shared TypeScript type definitions
└── tools/          # Internal scripts and utilities

Frontend app structure

apps/frontend/src/app/
├── components/     # Reusable UI components
├── data/
│   ├── nodes/      # Node type definitions (schema, uischema, defaults)
│   └── templates/  # Pre-built workflow templates
├── features/       # Feature modules (key modules shown)
│   ├── diagram/    # React Flow integration and canvas logic
│   ├── json-form/  # Dynamic form rendering (JSONForms)
│   ├── integration/# Save/load strategies (props, localStorage, API)
│   ├── palette/    # Node library sidebar
│   ├── properties-bar/ # Properties panel
│   └── plugins-core/   # Plugin adapter layer
├── plugins/        # Optional feature plugins
├── store/          # Zustand state (diagram, selection, preferences)
└── utils/          # Shared utilities

Plugin system

Workflow Builder uses a plugin-based architecture. Plugins register themselves against named extension points in the app. The base app is not modified. Plugins add, wrap, or modify behavior by registering decorators.

Key properties of the plugin system:

• Plugins live in apps/frontend/src/app/plugins/
• Adding a plugin: create the directory, register decorators, import in plugins-core/index.ts
• Removing a plugin: delete the folder. Vite serves empty stubs, the app keeps working
• ESLint prevents direct imports from @/plugins, enforcing use of adapters

See the Plugins section for available plugins.

Data model

A workflow is a flat JSON object:

type IntegrationDataFormat = {
  name: string;
  layoutDirection: 'DOWN' | 'RIGHT';
  nodes: WorkflowBuilderNode[];
  edges: WorkflowBuilderEdge[];
};

Each node carries its type, position, icon, and a properties object whose shape is defined by that node type’s JSON Schema.

Execution

Workflow Builder focuses on the editor layer. The JSON output is designed to be consumed by your own backend execution engine. For in-editor execution, the optional Flow Runner plugin (Enterprise) can traverse the workflow graph and run node functions directly.