The recipe canvas

The canvas is the centre of recipe authoring. It is a free-form 2D space where you arrange nodes and draw connections between them. The interaction model is heavily inspired by industry-standard flow editors (n8n, Zapier visualisations, Figma) — drag from a palette, drop on the canvas, connect ports.

The recipe canvas with the palette open on the left, seven connected nodes laid out across the centre, and the toolbar plus minimap pinned to the bottom of the design surface.

Take a tour

The first time you open the recipe builder, a short guided walkthrough runs automatically. It dims the screen, spotlights one part of the builder at a time, and shows a popover with a title, a description, a step counter, progress dots, and Back / Next / Skip buttons. The builder tour has eight steps: the node palette, the canvas, the canvas controls toolbar, the language toggle, Save, Test, the Canvas / Triggers / Settings tabs, and Publish. Press Esc or click Skip to leave at any point.

The tour auto-runs only once per browser. To replay it later, click the Take a tour button in the top app-bar. The tour is in English only.

Layout

The canvas is divided into four regions:

Palette (left) — every node type, grouped by category (Messaging, Input & Collection, AI & Intelligence, Logic & Control, Integrations, Commerce, Flow Control). Search filters by name and description. Collapse to a thin strip via the chevron at the top of the palette to reclaim horizontal space; the choice persists across reloads.
Canvas (centre) — the design surface itself, with a dotted-grid background and the recipe’s nodes and edges.
Drawer (right) — slides in when a node is selected. Carries General, Advanced, and FAQ tabs.
Toolbar (bottom-left) — zoom in, zoom out, fit view, auto-arrange, minimap toggle, and add sticky note.

A draggable minimap sits in the bottom-right corner. Click to jump, drag inside it to pan. Toggle it off from the toolbar if it gets in the way.

Admins and super-admins also see a floating ✦ Craft Copilot pill anchored to the bottom-right of the canvas. It opens the Craft Copilot panel — an in-canvas assistant for generating, diagnosing, and explaining nodes. Supervisors, agents, and read-only users never see this pill.

The canvas viewport dimmed except for the minimap pinned to the bottom-right corner, highlighted with an azure outline.

Header bar

A thin bar above the canvas summarises everything you need to know about the current edit session:

The header bar above the canvas, showing the Edit Mode badge on the left, the autosave indicator ("Saved at 05:40 PM") next to it, and the EN / AR language toggle, Save button, and Test button on the right.

Mode badge — “Edit Mode” when you have permission to change the recipe, “Read-only” or “View Mode (Snapshot)” otherwise.
Autosave indicator — shows “Saving…”, “Saved at HH:MM”, or ”● Unsaved (n)” depending on state. Drafts autosave every 60 seconds; you can also hit the Save button to flush immediately.
Validation chip — appears when the recipe has blockers or warnings. Click it to open the Issues panel (see below).
Language toggle — switch the canvas display between EN and عربي (Arabic). Node configuration drawers show both languages side-by-side regardless of which toggle is active; this is the display language for node labels and prompts on the canvas.
Save — manual save. Useful before leaving the page if you can’t wait for autosave.
▶ Test — opens the simulator. Available to Admin, SuperAdmin, and Supervisor roles. See The simulator.
Version History and Publish sit at the top of the page, above the Canvas / Triggers / Settings tabs.

Adding nodes

Drag a node type from the palette onto the canvas. The node spawns at the drop point. Connect it by clicking and dragging from one node’s output port to the next node’s input port.

Greyed-out palette entries (such as Media or Smart AI) are deferred to a later release — hovering over them tells you when they’re due.

Selecting and editing

Click a node to select it. The drawer slides in with the node’s configuration.
Hover over a selected node to reveal its hover toolbar: a ? button (admin/super-admin only) opens Craft Copilot to the Explain tab for that node, and a trash icon deletes the node. The Start node cannot be deleted; every recipe must have exactly one.
Hover over a connection line and click the × midpoint to remove the connection.
Double-click a sticky note to enter edit mode and change its text.

The Typed Input config drawer, showing the General, Advanced, and FAQ tabs along the top, the EN and AR prompt fields, the input type dropdown, capture-to-variable, the Required checkbox with min / max / regex validation rules, the validation message, and a Delete node action at the bottom.

The drawer’s General tab holds the everyday configuration — the prompt text in both languages, the input type, the variable to capture into, validation rules, and the like. Advanced holds optional fields most recipes don’t need (retry behaviour, fallback overrides). FAQ carries quick reference notes for that node type. Edits stream into autosave as you type.

Drag, resize, and pan

Nodes drag smoothly with the cursor — the canvas keeps internal state during the drag and only commits to the recipe on mouse-up, so the draft stays clean while you reposition.
Sticky notes resize via the corner handles when selected; the canvas commits the new size on resize-end.
Pan with left-mouse-drag on empty canvas, or two-finger drag on a trackpad.
Zoom with the scroll wheel, or use the toolbar’s + and − buttons. The Fit view toolbar button re-frames every node into the visible area.

Auto-arrange

Click the ⇳ (auto-arrange) button in the bottom-left toolbar to lay out every node into columns based on its distance from the Start node. Useful after pasting in a sprawling subgraph or recovering from a messy edit. The auto-arrange runs as a single canvas operation, so one undo (Cmd / Ctrl + Z) puts the layout back.

Sticky notes

Sticky notes are free-floating annotations — they don’t participate in the flow. Use them to leave context for collaborators, mark sections, or document “why” decisions. Add one from the toolbar’s 📝 button; it drops into the centre of the current viewport. Sticky notes sit visually behind real nodes so they never block clicks on flow controls.

Validation cues

Each node card shows status indicators:

Red ⚠ in the header — a publish-blocking issue (missing required field, unconnected required port, invalid configuration).
Amber ⚠ in the header — a non-blocking warning (missing language version, long Wait pulling near the WhatsApp 24h window).
Red outline on a port — that output is unconnected.

The recipe cannot be published while any node has a blocker. The header validation chip surfaces the totals; clicking it opens a side panel listing every blocker and warning. Each row in that panel jumps you to the offending node on click, so you don’t have to hunt for them.

Keyboard

See Reference → Keyboard shortcuts for the full list. The most-used:

Delete / Backspace — remove the selected node or edge.
Cmd / Ctrl + S — save draft (autosave also runs every 60s).
Cmd / Ctrl + Z — undo (canvas-local; reverts within the current draft).
Ctrl + Shift + C (macOS: Cmd + Shift + C) — toggle the Craft Copilot panel (admin / super-admin only).