Live Demo | Documentation | Website
Frontend SDK for embedding production-ready workflow editors.
Workflow Builder is an open-source SDK that gives you a ready-made workflow editor UI - canvas, nodes, edges, layout, and configuration panels - so you don't have to build workflow UX from scratch. It focuses exclusively on the frontend editor layer; execution, orchestration, and business logic stay fully under your control. The SDK outputs workflow definitions as JSON that your own backend executes.
Used in production by teams including Vercom, Athena Intelligence, Plura AI, and others.
Three onboarding paths. Pick one based on what you want to evaluate.
| Goal | Path | Setup time | Docker |
|---|---|---|---|
| See the editor running in your browser | A. Try the demo | ~2 min | no |
| Run the full reference stack (editor + execution + AI) | B. Run the full stack demo | ~10 min | yes |
| Use the SDK inside your own React app | C. Embed the SDK | see docs | no |
Want to skip the clone entirely? Try the live demo first.
- Node
22.12.0and pnpm10.9.0. Both pinned inpackage.json. Usenvm,fnm, orcorepackto match. - Docker Desktop. Only required for Path B.
Works the same on macOS, Linux, and Windows. No platform-specific steps.
Run this once after cloning. It verifies Node, pnpm, Docker, port availability, and required .env files.
pnpm install
pnpm preflightExpected output:
Workflow Builder preflight
✅ node 22.12.0
✅ pnpm 10.9.0
✅ docker running
✅ port_3001 free (backend)
✅ port_4200 free (demo)
✅ port_4201 free (ai-studio)
✅ port_5432 free (postgres)
✅ port_5433 free (temporal-db)
✅ port_7233 free (temporal)
✅ port_8233 free (temporal-ui)
⚠️ apps/backend/.env missing — copy from apps/backend/.env.example
⚠️ apps/execution-worker/.env missing — copy from apps/execution-worker/.env.example
Ready to go. Pick a path in README.md "Get started".
The two .env warnings are expected on a fresh clone. They are only required for Path B and get created by pnpm setup:env in step 1 of that path. After that they switch to ✅ present.
Fix any red (❌) items before continuing. The script also has a --json mode for tooling: pnpm preflight --json.
UI only. No backend, no Docker. The fastest way to see the editor in action.
pnpm dev:demoExpected output:
[1] VITE vX.Y.Z ready in NNN ms
[1]
[1] ➜ Local: http://localhost:4200/
[0] Found 0 errors. Watching for file changes.
Open http://localhost:4200. The editor loads with the default plugin set and a starter template. That's it.
Full reference product: editor, Hono backend, Temporal worker, Postgres. The frontend on port 4201 is the AI Studio reference product (apps/ai-studio). Demonstrates end-to-end workflow execution.
1. Create .env files. First time only. Copies the .env.example templates into place; existing .env files are left untouched.
pnpm setup:env2. Start infrastructure.
pnpm infra:upExpected output (first run):
Network backend_default Created
Volume "backend_temporal-db-data" Created
Volume "backend_app-db-data" Created
Container backend-app-db-1 Started
Container backend-temporal-db-1 Started
Container backend-temporal-1 Started
Container backend-temporal-ui-1 Started
Verify: open http://localhost:8233 (Temporal UI). The default namespace appears.
3. Run migrations. First time, or after pulling schema changes.
pnpm -F backend db:migrateExpected output:
> drizzle-kit migrate
Using 'postgres' driver for database querying
[✓] migrations applied successfully!
4. Start the stack.
pnpm dev:ai-studioExpected output (three interleaved streams):
Temporal ready
[backend] Backend running on http://127.0.0.1:3001
[worker] Execution worker started on task queue: workflow-execution
[ai-studio] VITE vX.Y.Z ready in NNN ms
[ai-studio] ➜ Local: http://127.0.0.1:4201/
Open http://localhost:4201. Pick the "Sales Inquiry" template, click Play. The Temporal UI at http://localhost:8233 shows the running execution.
To stop: Ctrl+C, then pnpm infra:down.
AI Studio works with stub responses out of the box. To use a real model, add to both apps/backend/.env and apps/execution-worker/.env:
OPENROUTER_API_KEY=sk-or-v1-...
AI_MODEL=anthropic/claude-3.5-haikuIf the key is missing the worker fails to start with OPENROUTER_API_KEY is required. If the model id is wrong the first AI node fails at runtime and the error surfaces in the UI log panel.
To build your own React app on top of @workflowbuilder/sdk, follow the React Component guide on the docs site. It covers installation, peer deduplication (for local-path builds until npm publish), usage, persistence strategies, theming, and the full API reference.
| Symptom | Cause | Fix |
|---|---|---|
EADDRINUSE on 3001, 4200, 4201, 5432, 5433, 7233, or 8233 |
Another process holds the port | pnpm preflight shows the conflict. Stop the other process or change the port |
Temporal UI loads but the default namespace is missing |
Migrations not run | pnpm -F backend db:migrate |
Worker exits with OPENROUTER_API_KEY is required |
Real LLM env var missing | Set it in apps/execution-worker/.env. Optional unless you want a real LLM call |
pnpm dev:demo shows TypeScript errors but the dev server still starts |
concurrently runs typecheck alongside Vite. TS errors are non-fatal |
Fix the errors or ignore them temporarily |
| Vite acts up after a dependency change | Stale node_modules/.vite |
rm -rf node_modules/.vite and rerun |
For the full command reference, see the table in CLAUDE.md or the documentation site.
- Plugin-first architecture - optional features can be added or removed without breaking the app
- Schema-driven properties panels - configure node inputs declaratively
- JSON-serializable workflows - plug into any backend; execution stays yours
- Design System Kit - theming and white-label support out of the box
- Configurable and extensible node system
- Visual workflow editor (nodes, edges, layout, validation)
Workflow Builder uses a plugin-first architecture. Plugins are optional features that can be added or removed without breaking the app. For details on how the plugin system works, see the plugins guide.
| Plugin | Description |
|---|---|
| Avoid Nodes Edges | Orthogonal edge routing using Web Workers and WASM |
| Copy Paste | Cut, copy, and paste operations for nodes and edges |
| Download PDF | Export diagrams to PDF |
| ELK Layout | Automatic node and edge arrangement using the ELK layout engine |
| Flow Runner | Example JSON parser that converts workflow diagrams into callable flow functions |
| Reshapable Edges | Manual reshaping of orthogonal edges using drag handles |
| Undo Redo | Local session history for undo/redo operations |
| Widgets | Optional node widgets displayed directly on the diagram |
Workflow Builder is commonly used to:
- embed workflow editors into B2B SaaS products
- build visual rule engines and configuration tools
- design AI agent and automation workflow platforms
- serve as a foundation for workflow-driven products and standalone apps
Monorepo of Workflow Builder - a frontend-first SDK and foundation for building workflow-driven applications.
Using pnpm workspaces, Workflow Builder is split into runnable apps under apps/ and reusable libraries under packages/:
packages/sdk-@workflowbuilder/sdk, the embeddable React library (public API, types, build)packages/types-@workflow-builder/types, shared TypeScript types used by the SDK and the bundled backend/workerpackages/execution-core- Pure domain layer (ports, graph runner, node executors) shared by the bundled backend and workerapps/demo- Reference SPA that consumes the SDK with the full plugin set (also the source of truth for example node types, templates, and plugins)apps/docs- Documentation siteapps/icons- Lazy-loadable, extensible icons consumed by the SDK
The repo also ships an example AI workflow execution backend used by the AI Studio plugin. This is not part of the frontend SDK — it is a reference implementation showing one way to pair the editor with an execution engine:
backend- Hono HTTP server, workflow CRUD, SSE streaming; hexagonal — depends onWorkflowEnginePortexecution-worker- Temporal worker executing workflow activities
Technical choices are documented in *.decision-log.md files that live alongside the code they relate to. See the decision logs list.
The bundled execution backend (apps/backend, apps/execution-worker) is a reference implementation of the AI Studio plugin's execution layer. It has no authentication, no authorization, no user/tenant isolation, and no CORS restrictions. By default it binds only to 127.0.0.1 and the docker-compose stack does the same — nothing in the reference setup is reachable from the local network.
Do not expose this backend to the internet, a shared LAN, or any environment with untrusted users without first adding proper authn/authz. Anyone who can reach the port can read, modify, and execute every workflow.
For production deployments, see Workflow Builder Enterprise or build your own backend against WorkflowEnginePort.
This repository contains the community edition of Workflow Builder, maintained by Synergy Codes. The commercial edition is built on the same codebase and adds premium plugins.
We develop everything in a private monorepo and publish releases here through an automated pipeline, which is why commit history and collaborator activity may look limited. There's a full engineering team behind this — questions, issues, and feedback are very welcome here.
Workflow Builder is available in two editions:
- Community Edition - Open source, Apache 2.0 licensed, this repository
- Enterprise Edition - Commercial license with long-term support, advanced features, and professional services. Learn more at workflowbuilder.io
Workflow Builder is a frontend-only SDK. For enterprise companies that need end-to-end implementations, we also offer professional consulting services.
Our team has delivered 170+ custom workflow tools across industries and brings 15+ years of experience building enterprise-class diagramming and automation tools. We can help with:
- backend execution engines
- custom integrations
- enterprise-grade customization and scaling
- accelerating time-to-market with proven architecture patterns
Learn more about Enterprise Edition and consulting at workflowbuilder.io.