Workflow Editor
The visual canvas where you design, connect, and execute AI workflows.
Overview
The workflow editor is a node-based canvas built on React Flow. You add nodes (AI models, inputs, logic), connect their ports with cables, and execute the pipeline with one click.
Editor layout
- Canvas — the main area where you arrange nodes
- Toolbar — top bar with Execute, Save, Undo/Redo, Zoom controls
- Node Library — sidebar (+ button) to browse and add nodes
- Config Panel — right panel that opens when you click a node
- Execution Panel — bottom panel showing run status and logs
Key concepts
| Concept | Description |
|---|---|
| Node | A unit of work — AI model, input, logic gate, or publisher |
| Port | Input or output slot on a node. Typed: text, image, video, audio, flexible |
| Edge | A connection (cable) between an output port and an input port |
| DAG | Directed Acyclic Graph — your workflow must not have cycles |
| Artifact | The output generated by a node after execution |
Workflow structure
Under the hood, a workflow is stored as JSON:
{
"nodes": [ ... ], // List of node objects
"edges": [ ... ], // List of connection objects
"viewport": { "x": 0, "y": 0, "zoom": 1 }
}In this section
- Nodes — types, config, positioning
- Connections — ports, types, validation
- Execution — how workflows run
- Artifacts — outputs and storage
Last updated: 2026-03-27