Workflow Editor
Learn the visual canvas, toolbar, node types, edges, configuration panel, and autosave system.
The Workflow Editor is where you build and configure your automations. It's a drag-and-drop canvas powered by React Flow.
Canvas Overview
When you open a workflow, you see:
- Canvas (center) — The main area where you drag, connect, and arrange nodes.
- Toolbar (top) — Controls for undo, redo, save, run, AI generate, export, and settings.
- Config Panel (right sidebar) — Opens when you select a node, showing its configuration fields.
- Runs Panel (right sidebar tab) — Shows execution history and per-step logs.
Node Types
Every workflow is a directed graph of nodes connected by edges.
Trigger Node
Each workflow has exactly one trigger node. It defines how the workflow starts:
- Manual — Run from the editor with a button click.
- Webhook — Triggered by an HTTP POST to the workflow's webhook URL.
- Schedule — Configured with a cron expression and timezone.
See Triggers for full details.
Action Nodes
These are the steps that do work. Each action node belongs to an integration plugin (like Skytells, Slack, or GitHub) or is a built-in system action (HTTP Request, Database Query, Condition).
Click an action node to configure it in the right panel. See Actions Catalog for the full list.
Add Node (+)
The + node appears at the end of your workflow chain. Click it to browse and add new action nodes.
Connecting Nodes (Edges)
Drag from a node's output handle to another node's input handle to create an edge. Edges define the execution order — the workflow engine follows them sequentially from the trigger node through each connected action.
Right-click an edge to delete it.
Toolbar
The toolbar at the top provides:
| Control | Description |
|---|---|
| Undo / Redo | Reverse or replay recent changes (full history) |
| Save | Manually save the workflow (also auto-saves — see below) |
| Run | Execute the workflow immediately using the current trigger |
| AI Generate | Skytells AI assistant to build or modify the workflow from a natural language prompt |
| Export | Download the workflow as TypeScript code or a full Next.js project |
| Settings | Open workflow settings (name, description, visibility) |
Configuration Panel
When you select a node, the right sidebar shows its configuration:
- Trigger nodes: Trigger type selector (Manual / Webhook / Schedule) and type-specific fields
- Action nodes: Integration selector, action-specific config fields, and template variable inputs
Config fields vary by action. Common field types:
- Text / Template Input — Plain text or text with
{{variable}}support - Template Textarea — Multi-line text with variable support
- Select — Dropdown with predefined options
- Number — Numeric input
- Schema Builder — Define a JSON schema (used for webhook payloads)
- Skytells Model Picker — Browse and select a Skytells model
Fields with template support let you reference previous step outputs. See Variables & Conditions.
Context Menu
Right-click a node or edge to access:
- Delete — Remove the node or edge
- Duplicate — Copy a node with its configuration
Autosave
The editor automatically saves your workflow 1 second after you stop making changes (debounced autosave). You'll see a save indicator in the toolbar. You can also save manually at any time.
Workflow Settings
Open Settings from the toolbar to configure:
- Name and Description — Displayed on the dashboard
- Visibility —
private(default, only you) orpublic(read-only access for anyone with the link)
Duplicating Workflows
From the dashboard, you can duplicate any workflow. The duplicate:
- Gets new unique node IDs
- Has all integration references removed (you'll need to re-attach them)
- Is always set to
privatevisibility
Workflow Validation
The editor checks for issues before running:
- Every workflow must have exactly one trigger node
- Action nodes must have required fields filled
- Integration connections must be selected for actions that need credentials
If there are issues, the Workflow Issues indicator shows a count. Click it to see the full list.
Keyboard Shortcuts
- Ctrl/Cmd + Z — Undo
- Ctrl/Cmd + Shift + Z — Redo
- Delete / Backspace — Remove selected node or edge
- Ctrl/Cmd + S — Save
Next Steps
Triggers
Configure Manual, Webhook, and Schedule triggers.
Actions
Browse all available actions.
AI Generation
Build workflows with natural language.
Code Export
Export workflows as TypeScript or Next.js projects.
How is this guide?