Recipe Node Editor

Canvas Model

The infinite canvas uses a viewport transform with zoom-to-cursor scaling. Nodes are positioned absolutely in world-space coordinates. Pan is clamped to prevent disorientation; zoom range is 0.25x–4x. Grid snapping aligns nodes to a 20px subdivision on drop.

viewport = {
  x: number,   // world offset
  y: number,
  zoom: number // 0.25–4.0
}
node = {
  id: string,
  type: "trigger" | "action" | "condition",
  x: number, y: number,
  inputs: Port[], outputs: Port[]
}

Node Palette

A searchable sidebar lists available node types grouped by category. Drag a node from the palette onto the canvas to instantiate it. The palette collapses on narrow viewports and reopens via a floating trigger in the bottom-left corner.

Connection Wiring

Drag from an output port to an input port to create a directed edge. Edges render as cubic Bézier curves with a subtle gradient from the source color to the target color. Invalid connections (type mismatch, cycle creation) show a red pulse and reject on drop.

• Single-output to multi-input allowed; multi-output to single-input blocked.
• Cycle detection runs on every edge addition via DFS.
• Hovering a port highlights all compatible targets with a glow ring.

Property Panel

Selecting a node opens a right-docked panel showing type-specific fields. Changes are debounced at 300ms and synced to the graph model. The panel supports undo via a local command stack scoped to the selected node.

Keyboard Shortcuts