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:

ControlDescription
Undo / RedoReverse or replay recent changes (full history)
SaveManually save the workflow (also auto-saves — see below)
RunExecute the workflow immediately using the current trigger
AI GenerateSkytells AI assistant to build or modify the workflow from a natural language prompt
ExportDownload the workflow as TypeScript code or a full Next.js project
SettingsOpen 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
  • Visibilityprivate (default, only you) or public (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 private visibility

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

How is this guide?

On this page