Workflow Editor
Canvas interface to build and edit workflows.
Overview
| Property | Value |
|---|---|
| Key | editor_workflow |
| Category | Editor |
The Workflow Editor is the main canvas for building AI workflows. It renders a full React Flow graph where you place blocks, draw connections between them, and configure each step of your automation pipeline. The widget runs inside its own socket connection and workflow store, so multiple editors can operate independently in the same workspace.
Features
- React Flow canvas with pan, zoom, and node selection built in
- Block toolbar in the header with searchable dropdown that lists blocks, tools, and triggers grouped by category; drag a block from the toolbar onto the canvas to add it
- Loop and parallel blocks available as special toolbar items for control-flow logic
- Floating controls for quick canvas actions (enabled by default in the widget configuration)
- Training controls toggle that lets you switch training-mode overlays on or off per widget
- Diff controls for reviewing version changes against a previous workflow state
- Trigger list showing all triggers attached to the workflow
- Viewport-aware positioning -- the widget tracks its own bounding rect so new blocks drop at the visible center of the canvas, even when the widget is embedded in a small panel
- Nested subflow validation with real-time error highlighting when a subflow reference is invalid
- Trigger warning dialog that fires when you add a duplicate trigger or hit another trigger constraint
Usage
Adding the widget
Open the widget picker in any workspace panel and select Workflow Editor. The widget loads the active workflow for the current workspace. If no workflows exist yet, it displays a placeholder message.
Header layout
The header is split into three sections:
- Left: the block toolbar -- a dropdown to browse and search available blocks, tools, and triggers, then add them to the canvas
- Center: a workflow selector dropdown that lets you switch between workflows in the workspace
- Right: the control bar with execution, save, and workflow-level actions
Key interactions
- Add a block -- open the toolbar dropdown, search or browse, then click a block to place it at the viewport center
- Connect blocks -- drag from an output handle to an input handle to create an edge
- Select and configure -- click a node to select it; its settings appear in the paired Copilot or Variables widget
- Delete -- select a node or edge and press Delete
- Undo / Redo -- standard keyboard shortcuts
Pair color syncing
When assigned a pair color, the editor synchronizes its active workflow with other widgets sharing the same color. Changing the workflow in the header selector broadcasts the selection to all paired widgets. When the pair color is gray (unlinked), the widget manages its own selection independently via widget params.
Pair this widget with Console, Chat, Variables, or Copilot using matching pair colors to build a full workflow development workspace.
Configuration
The canvas UI is controlled by WorkflowCanvasUIConfig:
| Option | Default | Description |
|---|---|---|
floatingControls | true | Show floating action buttons on the canvas |
trainingControls | true | Enable training-mode control overlays |
forceTrainingControls | false | Always show training controls regardless of user toggle |
diffControls | true | Show diff review controls |
triggerList | true | Display the trigger list panel |
controlBar | false | Show the legacy control bar (off by default in the widget) |
These defaults are set at the widget level and merged with any layout-level overrides.
Related
Blocks Overview
Browse all available workflow blocks.
Tools Overview
Browse all available workflow tools.
Triggers Overview
Browse all available workflow triggers.
Workflow List
Browse and manage workflow files.
Workflow Console
View execution logs and streaming output.
Workflow Chat
Interact with a running workflow.
Copilot
AI assistant for workflows, MCP, skills, custom tools, and more.
Workflow Variables
Inspect and edit variable state.