{"id":50188642,"url":"https://github.com/synergycodes/workflowbuilder","last_synced_at":"2026-05-25T11:34:00.880Z","repository":{"id":297421249,"uuid":"996682315","full_name":"synergycodes/workflowbuilder","owner":"synergycodes","description":"Workflow Builder is a frontend-first SDK for creating complex workflow editors. Designed for hassle-free integration with any backend, it delivers everything you need to design workflow interface faster – from drag-and-drop nodes to customizable layouts.","archived":false,"fork":false,"pushed_at":"2026-05-21T21:35:39.000Z","size":9448,"stargazers_count":189,"open_issues_count":1,"forks_count":42,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-05-21T23:51:18.667Z","etag":null,"topics":["ai-workflows","configurator-ui","diagramming","embedded-workflow","frontend-sdk","node-diagram","plugin-architecture","process-builder","product-workflows","react","react-flow","react-workflow","rule-configurator","visual-workflow","workflow","workflow-builder","workflow-configurator","workflow-editor","workflow-ui"],"latest_commit_sha":null,"homepage":"https://www.workflowbuilder.io/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/synergycodes.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-06-05T09:55:55.000Z","updated_at":"2026-05-21T22:07:30.000Z","dependencies_parsed_at":null,"dependency_job_id":"081c23ac-0749-4702-81f2-d761c91a7719","html_url":"https://github.com/synergycodes/workflowbuilder","commit_stats":null,"previous_names":["workflowbuildersdk/workflowbuilder","synergycodes/workflowbuilder"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/synergycodes/workflowbuilder","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/synergycodes%2Fworkflowbuilder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/synergycodes%2Fworkflowbuilder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/synergycodes%2Fworkflowbuilder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/synergycodes%2Fworkflowbuilder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/synergycodes","download_url":"https://codeload.github.com/synergycodes/workflowbuilder/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/synergycodes%2Fworkflowbuilder/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33473704,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-25T06:32:55.349Z","status":"ssl_error","status_checked_at":"2026-05-25T06:32:35.322Z","response_time":57,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai-workflows","configurator-ui","diagramming","embedded-workflow","frontend-sdk","node-diagram","plugin-architecture","process-builder","product-workflows","react","react-flow","react-workflow","rule-configurator","visual-workflow","workflow","workflow-builder","workflow-configurator","workflow-editor","workflow-ui"],"created_at":"2026-05-25T11:33:56.535Z","updated_at":"2026-05-25T11:34:00.863Z","avatar_url":"https://github.com/synergycodes.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n\u003ca href=\"https://www.workflowbuilder.io/\"\u003e\u003cimg alt=\"Workflow Builder\" src=\"https://cdn.synergycodes.com/workflow-builder-logo-solid.svg\" width=\"201\" height=\"40\"\u003e\u003c/a\u003e\n\n[Live Demo](https://app.workflowbuilder.io/) \u0026nbsp;|\u0026nbsp; [Documentation](https://www.workflowbuilder.io/docs/overview/) \u0026nbsp;|\u0026nbsp; [Website](https://www.workflowbuilder.io/)\n\n**Frontend SDK for embedding production-ready workflow editors.**\n\nWorkflow 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.\n\n---\n\n[![Build](https://github.com/synergycodes/workflowbuilder/actions/workflows/build.yml/badge.svg)](https://github.com/synergycodes/workflowbuilder/actions/workflows/build.yml)\n[![License](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](./LICENSE)\n[![Discord](https://img.shields.io/badge/chat-Discord-5865F2.svg)](https://discord.com/invite/FDMjRuarFb)\n\n![Workflow Builder demo](docs/assets/workflow-builder-demo.gif)\n\n[Try it live -\u003e](https://app.workflowbuilder.io/)\n\nUsed in production by teams including [Vercom](https://www.workflowbuilder.io/case-study/vercom), [Athena Intelligence](https://www.workflowbuilder.io/case-study/athena-intelligence), [Plura AI](https://www.workflowbuilder.io/case-study/plura-ai), and others.\n\n\u003c/div\u003e\n\n\u003e 🎉 **Workflow Builder 2.0 is here.**\n\u003e\n\u003e A best-in-class SDK for embedding workflow editors, now paired with a dedicated reference backend and a fully modular plugin surface. Building products on top of a workflow editor has never been easier.\n\u003e\n\u003e Starting with 2.0, this repository is the home of Workflow Builder. Previously we worked in a private monorepo and only partially mirrored changes here. From now on, every commit lands here directly.\n\u003e\n\u003e See the [CHANGELOG](./CHANGELOG.md) for everything that's changed since the last release.\n\n## Get started\n\nThree onboarding paths. Pick one based on what you want to evaluate.\n\n| Goal                                                   | Path                                                          | Setup time | Docker |\n| ------------------------------------------------------ | ------------------------------------------------------------- | ---------- | ------ |\n| See the editor running in your browser                 | [A. Try the demo](#path-a-try-the-demo)                       | ~2 min     | no     |\n| Run the full reference stack (editor + execution + AI) | [B. Run the full stack demo](#path-b-run-the-full-stack-demo) | ~10 min    | yes    |\n| Use the SDK inside your own React app                  | [C. Embed the SDK](#path-c-embed-the-sdk)                     | see docs   | no     |\n\nWant to skip the clone entirely? [Try the live demo](https://app.workflowbuilder.io) first.\n\n### Requirements\n\n- Node `22.12.0` and pnpm `10.9.0`. Both pinned in `package.json`. Use `nvm`, `fnm`, or `corepack` to match.\n- Docker Desktop. Only required for Path B.\n\nWorks the same on macOS, Linux, and Windows. No platform-specific steps.\n\n### Preflight check\n\nRun this once after cloning. It verifies Node, pnpm, Docker, port availability, and required `.env` files.\n\n```bash\npnpm install\npnpm preflight\n```\n\nExpected output:\n\n```\nWorkflow Builder preflight\n\n✅ node                        22.12.0\n✅ pnpm                        10.9.0\n✅ docker                      running\n✅ port_3001                   free (backend)\n✅ port_4200                   free (demo)\n✅ port_4201                   free (ai-studio)\n✅ port_5432                   free (postgres)\n✅ port_5433                   free (temporal-db)\n✅ port_7233                   free (temporal)\n✅ port_8233                   free (temporal-ui)\n⚠️  apps/backend/.env           missing — copy from apps/backend/.env.example\n⚠️  apps/execution-worker/.env  missing — copy from apps/execution-worker/.env.example\n\nReady to go. Pick a path in README.md \"Get started\".\n```\n\nThe 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`.\n\nFix any red (`❌`) items before continuing. The script also has a `--json` mode for tooling: `pnpm preflight --json`.\n\n### Path A. Try the demo\n\nUI only. No backend, no Docker. The fastest way to see the editor in action.\n\n```bash\npnpm dev:demo\n```\n\nExpected output:\n\n```\n[1]   VITE vX.Y.Z  ready in NNN ms\n[1]\n[1]   ➜  Local:   http://localhost:4200/\n[0] Found 0 errors. Watching for file changes.\n```\n\nOpen `http://localhost:4200`. The editor loads with the default plugin set and a starter template. That's it.\n\n### Path B. Run the full stack demo\n\nFull 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.\n\n**1. Create `.env` files.** First time only. Copies the `.env.example` templates into place; existing `.env` files are left untouched.\n\n```bash\npnpm setup:env\n```\n\n**2. Start infrastructure.**\n\n```bash\npnpm infra:up\n```\n\nExpected output (first run):\n\n```\n Network backend_default            Created\n Volume \"backend_temporal-db-data\"  Created\n Volume \"backend_app-db-data\"       Created\n Container backend-app-db-1         Started\n Container backend-temporal-db-1    Started\n Container backend-temporal-1       Started\n Container backend-temporal-ui-1    Started\n```\n\nVerify: open `http://localhost:8233` (Temporal UI). The `default` namespace appears.\n\n**3. Run migrations.** First time, or after pulling schema changes.\n\n```bash\npnpm -F backend db:migrate\n```\n\nExpected output:\n\n```\n\u003e drizzle-kit migrate\n\nUsing 'postgres' driver for database querying\n[✓] migrations applied successfully!\n```\n\n**4. Start the stack.**\n\n```bash\npnpm dev:ai-studio\n```\n\nExpected output (three interleaved streams):\n\n```\nTemporal ready\n[backend]    Backend running on http://127.0.0.1:3001\n[worker]     Execution worker started on task queue: workflow-execution\n[ai-studio]    VITE vX.Y.Z  ready in NNN ms\n[ai-studio]    ➜  Local:   http://127.0.0.1:4201/\n```\n\nOpen `http://localhost:4201`. Pick the \"Sales Inquiry\" template, click Play. The Temporal UI at `http://localhost:8233` shows the running execution.\n\nTo stop: `Ctrl+C`, then `pnpm infra:down`.\n\n#### Connect a real LLM (optional)\n\nAI 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`:\n\n```env\nOPENROUTER_API_KEY=sk-or-v1-...\nAI_MODEL=anthropic/claude-3.5-haiku\n```\n\nIf 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.\n\n### Path C. Embed the SDK\n\nTo build your own React app on top of `@workflowbuilder/sdk`, follow the [React Component guide on the docs site](https://www.workflowbuilder.io/docs/get-started/quick-start/wb-as-react-component/). It covers installation, peer deduplication (for local-path builds until npm publish), usage, persistence strategies, theming, and the full API reference.\n\n### Troubleshooting\n\n| Symptom                                                                 | Cause                                                                 | Fix                                                                              |\n| ----------------------------------------------------------------------- | --------------------------------------------------------------------- | -------------------------------------------------------------------------------- |\n| `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   |\n| Temporal UI loads but the `default` namespace is missing                | Migrations not run                                                    | `pnpm -F backend db:migrate`                                                     |\n| 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 |\n| `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                                        |\n| Vite acts up after a dependency change                                  | Stale `node_modules/.vite`                                            | `rm -rf node_modules/.vite` and rerun                                            |\n\nFor the full command reference, see the table in [`CLAUDE.md`](./CLAUDE.md) or the documentation site.\n\n## Key Features\n\n- **Plugin-first architecture** - optional features can be added or removed without breaking the app\n- **Schema-driven properties panels** - configure node inputs declaratively\n- **JSON-serializable workflows** - plug into any backend; execution stays yours\n- **Design System Kit** - theming and white-label support out of the box\n- Configurable and extensible node system\n- Visual workflow editor (nodes, edges, layout, validation)\n\n## Plugins\n\nWorkflow 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](./apps/demo/src/app/plugins/README.md).\n\n| Plugin                                                                       | Description                                                                      |\n| ---------------------------------------------------------------------------- | -------------------------------------------------------------------------------- |\n| [Avoid Nodes Edges](./apps/demo/src/app/plugins/avoid-nodes-edges/README.md) | Orthogonal edge routing using Web Workers and WASM                               |\n| [Copy Paste](./apps/demo/src/app/plugins/copy-paste/README.md)               | Cut, copy, and paste operations for nodes and edges                              |\n| [Download PDF](./apps/demo/src/app/plugins/download-pdf/README.md)           | Export diagrams to PDF                                                           |\n| [ELK Layout](./apps/demo/src/app/plugins/elk-layout/README.md)               | Automatic node and edge arrangement using the ELK layout engine                  |\n| [Flow Runner](./apps/demo/src/app/plugins/flow-runner/README.md)             | Example JSON parser that converts workflow diagrams into callable flow functions |\n| [Reshapable Edges](./apps/demo/src/app/plugins/reshapable-edges/README.md)   | Manual reshaping of orthogonal edges using drag handles                          |\n| [Undo Redo](./apps/demo/src/app/plugins/undo-redo/README.md)                 | Local session history for undo/redo operations                                   |\n| [Widgets](./apps/demo/src/app/plugins/widgets/README.md)                     | Optional node widgets displayed directly on the diagram                          |\n\n## Typical Use Cases\n\nWorkflow Builder is commonly used to:\n\n- embed workflow editors into B2B SaaS products\n- build visual rule engines and configuration tools\n- design AI agent and automation workflow platforms\n- serve as a foundation for workflow-driven products and standalone apps\n\n## Repository Structure\n\nMonorepo of [Workflow Builder](https://www.workflowbuilder.io/) - a frontend-first SDK and foundation for building workflow-driven applications.\n\nUsing `pnpm workspaces`, Workflow Builder is split into runnable apps under `apps/` and reusable libraries under `packages/`:\n\n- [`packages/sdk`](./packages/sdk/README.md) - `@workflowbuilder/sdk`, the embeddable React library (public API, types, build)\n- [`packages/types`](./packages/types) - `@workflow-builder/types`, shared TypeScript types used by the SDK and the bundled backend/worker\n- [`packages/execution-core`](./packages/execution-core/README.md) - Pure domain layer (ports, graph runner, node executors) shared by the bundled backend and worker\n- [`apps/demo`](./apps/demo/README.md) - Reference SPA that consumes the SDK with the full plugin set (also the source of truth for example node types, templates, and plugins)\n- [`apps/docs`](./apps/docs/README.md) - Documentation site\n- [`apps/icons`](./apps/icons/README.md) - Lazy-loadable, extensible icons consumed by the SDK\n\nThe 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:\n\n- [`backend`](./apps/backend/README.md) - Hono HTTP server, workflow CRUD, SSE streaming; hexagonal — depends on `WorkflowEnginePort`\n- [`execution-worker`](./apps/execution-worker/README.md) - Temporal worker executing workflow activities\n\nTechnical choices are documented in `*.decision-log.md` files that live alongside the code they relate to. See the [decision logs list](./DECISION-LOGS.md).\n\n## ⚠️ Reference Backend — Local Development Only\n\nThe 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.\n\n**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.\n\nFor production deployments, see [Workflow Builder Enterprise](https://www.workflowbuilder.io/) or build your own backend against `WorkflowEnginePort`.\n\n## License\n\nWorkflow Builder is available in two editions:\n\n- **Community Edition** - Open source, Apache 2.0 licensed, this repository\n- **Enterprise Edition** - Commercial license with long-term support, advanced features, and professional services. Learn more at [workflowbuilder.io](https://www.workflowbuilder.io/)\n\n## Support\n\nFor companies that need end-to-end implementations or any other support, we offer professional consulting services.\n\nOur team has delivered **170+ custom workflow tools** across 20+ industries and brings **15+ years** of experience building enterprise-class diagramming and automation tools. We can help with:\n\n- backend execution engines\n- custom integrations\n- enterprise-grade customization and scaling\n- accelerating time-to-market with proven architecture patterns\n\n[Talk to the team →](https://workflowbuilder.io/consulting/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsynergycodes%2Fworkflowbuilder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsynergycodes%2Fworkflowbuilder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsynergycodes%2Fworkflowbuilder/lists"}