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

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.

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.