Canvas & Flows

The canvas is a visual drag-and-drop editor built on ReactFlow. Connect webhooks, transforms, schema validators, and more into complete webhook pipelines — all without writing code.

Overview

Navigate to /dashboard/flows to open the canvas. Each node represents a webhook primitive (webhook, alert, scheduled webhook, etc.) and edges between nodes define the data flow. When an event arrives, the pipeline engine follows the edges to determine which nodes process it and in what order.

✦The canvas is purely a configuration tool — it does not execute flows in the browser. When you save, the node positions and connections are persisted and the API-side pipeline engine uses them at runtime.

Node palette

Drag nodes from the palette on the left side of the canvas. The following node types are available:

Node	Purpose
Webhook	Primary webhook receiver and delivery target
Alert	Email notification on consecutive failures
ScheduledWorkflow	Cron-based or one-shot timed delivery
SchemaValidator	Validate payload structure before delivery
ApprovalNode	Require manual approval before forwarding
DelayNode	Add a configurable delay to the pipeline
MergeNode	Combine multiple inputs into one output
SheetsAction	Append event data to a Google Sheet

ℹAn action node starts without an operation. Its card says No operation and it doesn't run: anything that reaches it is refused, with the reason in the run history, until you open the node and pick one under Operation. Nothing is chosen for you — the mode, the operation and its fields are all yours to pick. In AI toolkit mode the operation doesn't matter: each call names its tool.

Edges & connections

Connect nodes by dragging from an output handle to an input handle. An edge tells the pipeline engine that when the source node produces a result, the target node should process it next.

Edge types

Type	Description
default	Standard data-flow edge between most node types.
swEdge	Scheduled webhook edges. Identified by `swEdge: true` in edge data. Used when a ScheduledWorkflow node connects to a Webhook node.

ℹEdges from ScheduledWorkflow nodes automatically use the swEdge type. You do not need to set this manually.

Creating a flow

Open the canvas

Go to /dashboard/flows in the sidebar.

Drag nodes from the palette

Drop a Webhook node onto the canvas first — this is your ingress point. Then add downstream nodes like SchemaValidator or Alert.

Connect nodes with edges

Click and drag from the source handle (right side) to the target handle (left side) of another node. The edge defines the data flow.

Configure each node

Click a node to open its configuration panel. Set the target URL, retry policy, schema rules, or other node-specific settings.

Save the flow

Press Ctrl+S or click the Save button. The canvas layout and connections are persisted as a snapshot.

Working together

When two or more people have the same workspace open, the canvas shows it. A row of avatars appears at the top right, next to History — you first, with a ring, then everyone else in their own colour, and “Ana is here” or “3 others here” beside them. It is only there when somebody else is; your own avatar alone would not tell you anything.

Three things travel between the people in a workspace, live:

Cursors. Each person's pointer, with their name, in their colour. It follows zoom and pan, and disappears after five seconds without movement — they left the canvas, or their tab is in the background.
Moves. A node someone else is dragging moves on your canvas while they drag it, and settles where they drop it. A node you are holding is yours until you let go: nobody can move it out from under your hand. If two people drop the same node, the last drop wins — that is the position that gets saved.
Selections. The nodes each person has selected get an outline in their colour, with their name on it, so you can see what they are looking at before you touch it.

ℹOnly positions and names travel — never payloads, credentials or node configuration — and only between people who already have access to that workspace. Editing the configuration of the same node at the same time is not coordinated in this version: the last save wins, as it always has. Watch the outline before you open a node someone else has selected.

Canvas snapshots

Snapshots capture the full state of your canvas — all node positions, configurations, and edge connections — at a point in time. You can save multiple snapshots, restore previous ones, and use them for time-travel debugging.

Save & restore

When you save the canvas, a new snapshot is created. You can view all snapshots in the Snapshots panel and restore any previous version. The current canvas state is replaced with the restored snapshot.

⚠Restoring a snapshot overwrites the current canvas. Make sure to save your current state first if you want to preserve it.

Snapshot API

List snapshots

GET /api/canvas-snapshots

Returns all saved canvas snapshots for the current organization, sorted by creation date (newest first).

jsonResponse

[
  {
    "_id": "664a1f2e8b1c4a001f2d3e4f",
    "name": "Production flow v3",
    "nodes": [ ... ],
    "edges": [ ... ],
    "viewport": { "x": 0, "y": 0, "zoom": 1 },
    "createdAt": "2025-05-19T14:30:00.000Z",
    "updatedAt": "2025-05-19T14:30:00.000Z"
  }
]

Create snapshot

POST /api/canvas-snapshots

Saves the current canvas state as a new snapshot.

jsonRequest body

{
  "name": "Before refactor",
  "nodes": [
    {
      "id": "wh-abc123",
      "type": "webhook",
      "position": { "x": 100, "y": 200 },
      "data": { "webhookId": "664a1f2e8b1c4a001f2d0001" }
    },
    {
      "id": "sv-def456",
      "type": "schemaValidator",
      "position": { "x": 400, "y": 200 },
      "data": { "schemaValidatorId": "664a1f2e8b1c4a001f2d0002" }
    }
  ],
  "edges": [
    {
      "id": "e-1",
      "source": "wh-abc123",
      "target": "sv-def456"
    }
  ],
  "viewport": { "x": 0, "y": 0, "zoom": 1 }
}

✦Snapshots are also used by the Time Travel feature to replay events through historical configurations.