Visual editor for Temporal workflows

1. Your product mounts the WB React component - one import, one component.
2. End-users build flows on the canvas - drag-drop nodes, connect edges, fill custom node form schemas.
3. WB outputs a typed JSON graph definition on save.
4. The @workflowbuilder/temporal plugin runs the JSON graph as it is: one workflow interprets every diagram, so a new diagram needs no redeploy - this adapter ships day one.
5. Temporal executes with full durable execution (deterministic replay, retries, timeouts, full Event History).

The minimum wiring. Adapt to your node types, your data shape, your storage. The worker uses the Temporal TypeScript SDK.

import { WorkflowBuilder } from '@workflowbuilder/sdk';
import '@workflowbuilder/sdk/style.css';

// Your palette items: schema, default values, icon, label per node type.
import { nodeTypes } from './nodes';

export function WorkflowEditor({ workflowId }: { workflowId: string }) {
  return (
    <WorkflowBuilder.Root
      name={`workflow-${workflowId}`}
      nodeTypes={nodeTypes}
      integration={{
        strategy: 'api',
        endpoints: { load: `/api/workflows/${workflowId}`, save: `/api/workflows/${workflowId}` },
      }}
    />
  );
}

@workflowbuilder/temporal is a Temporal Plugin. On the worker you register it with one executor per node type and a store for execution events, and your workflows module re-exports its runWorkflow. On the backend, TemporalWorkflowEngine starts runs, cancels them and delivers approval decisions.

import { NativeConnection, Worker } from '@temporalio/worker';
import { WorkflowBuilderPlugin } from '@workflowbuilder/temporal';
import { fileURLToPath } from 'node:url';

type MyNode =
  | { id: string; type: 'my-app/http-request'; config: { url: string } }
  | { id: string; type: 'my-app/approval'; config: null };

const plugin = new WorkflowBuilderPlugin<MyNode>({
  // One executor per node type.
  executors: {
    'my-app/http-request': async (node) => ({ output: await callApi(node.config) }),
    'my-app/approval': () => ({ waiting: true }), // parks the run until a decision arrives
  },
  // Where execution events and statuses are stored.
  store: { emitExecutionEvent, updateExecutionStatus },
});

const worker = await Worker.create({
  connection: await NativeConnection.connect({ address: process.env.TEMPORAL_ADDRESS }),
  taskQueue: plugin.taskQueue,
  workflowsPath: fileURLToPath(new URL('workflows.ts', import.meta.url)),
  plugins: [plugin],
});
await worker.run();

// workflows.ts
export { runWorkflow } from '@workflowbuilder/temporal/workflow';

import { Client, Connection } from '@temporalio/client';
import { TemporalWorkflowEngine } from '@workflowbuilder/temporal/client';

const engine = new TemporalWorkflowEngine({
  client: async () => new Client({ connection: await Connection.connect({ address }) }),
});

// definition = { workflowId, nodes, edges }, mapped from the saved diagram
await engine.submit({ workflowId, executionId, definition, triggerPayload: {}, variables: {}, global: {} });

await engine.resolveNode({
  executionId,
  nodeId: 'approval-1',
  resolution: { output: 'approved', nextPort: 'approved' },
});

The adapter is @workflowbuilder/temporal on npm (Apache 2.0). apps/backend and apps/execution-worker in the public repository show it wired into a full stack. See Quick start below.