WorkflowBuilder - open-source, embeddable React SDK for visual workflow editors (runs on Temporal)

Show & Tell
, ,
1

Hey all :waving_hand:

Wanted to share something we’ve been building: WorkflowBuilder. It’s an open-source, embeddable React SDK that adds a visual workflow editor to your app. A canvas where people drag nodes, connect them, and build a workflow. The diagram they end up with is just data.

The reason I’m posting it here is that the data runs on Temporal. We ship a reference backend that takes a diagram and executes it as a Temporal workflow, so the thing your users draw in the browser is the thing that actually runs. The graph runner is deterministic and replay-safe inside the Temporal sandbox.

So if you’re on Temporal and have ever wanted to give people a visual way to build or inspect the workflows you execute, that’s the gap this fills. The SDK is engine-agnostic underneath, but Temporal is the default integration we built and the one we run ourselves.

The fastest way to get what it is, is to open the demo and play with it for a couple of minutes (links at the bottom). But here’s the short tour.

You embed it with one npm package and one component:

npm install @workflowbuilder/sdk

Nodes and their settings forms are configured with JSON. A node definition looks roughly like this, and the JSON Schema renders the properties sidebar automatically (via JSON Forms):


{
"type": "send-email",
"icon": "Mail",
"label": "Send Email",
"schema": {
  "type": "object",
  "properties": {
    "to":      { "type": "string" },
    "subject": { "type": "string" },
    "retries": { "type": "number" }
    }
  }
}

How the pieces fit together. The SDK runs in the browser, the backend persists the diagram and streams status, and on Temporal the graph runner is the workflow: it walks the graph and schedules each node as an activity.

image
image992×1398 94.8 KB

The runner that walks the graph is the Temporal workflow, and each node runs as
an activity. So the diagram your users draw is the thing that actually executes.

A few things worth calling out:

  • Data-driven palette + JSON Forms property panels — add a node type or reshape its form by editing JSON, no editor code.
  • Plugin system to extend the editor without forking. Two productivity plugins ship open source: undo/redo and copy/paste.
  • Temporal execution backend — topological runner, per-node error policies (fail / continue / error-route), live status streaming over SSE.
  • Persistence your way — localStorage, your REST API, or a save callback.
  • Theming via design tokens, light/dark, and i18n out of the box.

It’s Apache-2.0 with a live demo + docs. Happy to answer questions, and feedback.

Cheers!