Back to Docs
UX Design

Recipe Workflow Canvas

The infinite canvas where operators compose, connect, and execute multi-step automation recipes through direct manipulation.

C

Canvas Model

Infinite pan + zoom surface

Node Placement

Drag triggers from the palette onto the canvas. Nodes snap to a subtle grid and auto-arrange via force-directed layout when dropped near existing clusters.

Edge Wiring

Drag from an output port to an input port to create a connection. Edges render as smooth cubic beziers with animated pulse on active data flow.

Selection & Grouping

Marquee-select multiple nodes, then group into a sub-recipe. Groups collapse into a single compound node with exposed I/O ports.

Minimap Navigation

A live minimap in the bottom-right corner shows the full canvas at reduced scale. Drag the viewport rectangle to jump across large workflows instantly.

Interaction Patterns

1

Right-click any node for a context menu: duplicate, disable, configure parameters, or view execution history.

2

Double-click a node to expand its property panel inline. Edit JSON configuration, retry policies, and timeout values without leaving the canvas.

3

Space+drag to pan the canvas. Scroll wheel zooms centered on cursor. Pinch gestures supported on trackpads and touch devices.

Ready to build your first workflow? Head to the dashboard and open the Recipe Editor.

Open Editor