Canvas Editor

The Canvas is NodeLoom's primary workflow editor -- an infinite, zoomable canvas where you build workflows by dragging nodes, drawing connections, and configuring each step visually.

Infinite Canvas

The canvas provides an infinite two-dimensional workspace. You can pan by clicking and dragging on the background, zoom with the scroll wheel or trackpad pinch, and use the minimap in the bottom-right corner for orientation in large workflows.

NodeLoom handles node rendering, edge routing, viewport management, and interaction events with custom node types, handles, and an execution overlay.

Drag-and-Drop from Node Palette

The left sidebar contains the node palette -- a categorised, searchable list of all available nodes. To add a node to your workflow:

Find the node in the palette (use the search bar for speed).
Drag it onto the canvas and drop it where you want.
The node appears with its default configuration and can be immediately connected to other nodes.

Nodes are organised into categories: Triggers, Actions, AI, Logic, Data, Security, and Third-Party. Each category uses a distinct colour so you can quickly identify node types on a busy canvas.

Real-Time Execution Status

When you execute a workflow, the canvas shows live execution status on every node in real time. Each node transitions through visual states:

State	Visual Indicator	Meaning
Pending	Default (no overlay)	The node has not been reached yet.
Running	Pulsing blue border	The node is currently executing.
Success	Green check badge	The node completed successfully.
Error	Red exclamation badge	The node failed. Click to see the error details.
Skipped	Grey dimmed overlay	The node was skipped (e.g. a false branch in an IF node).

Auto-Save

The Canvas automatically saves your workflow after every change. Changes are batched if you are making rapid edits (like dragging multiple nodes) and saved once activity pauses. A small save indicator appears briefly in the toolbar to confirm the save.

No save button needed

There is no manual save button in the Canvas. Your work is always saved automatically. If you close the browser mid-edit, your last changes will be there when you return.

Keyboard Shortcuts

The Canvas supports a full set of keyboard shortcuts for faster editing:

Shortcut	Action
`Delete`	Delete selected nodes and edges.
`Cmd/Ctrl + D`	Duplicate selected nodes.
`Cmd/Ctrl + Z`	Undo the last action.
`Cmd/Ctrl + Shift + Z`	Redo the last undone action.
`Cmd/Ctrl + C`	Copy selected nodes to clipboard.
`Cmd/Ctrl + V`	Paste copied nodes onto the canvas.
`Cmd/Ctrl + A`	Select all nodes.
`Shift` + click / drag	Multi-select nodes.

Expression Editor

Any text field in a node's configuration can contain expressions using the {{ $json.fieldName }} syntax. When you click the expression toggle on a field, the expression editor opens with:

Field picker -- browse output fields from upstream nodes and insert them with a click.
Live preview -- see the evaluated result of your expression using pinned execution data.
Syntax highlighting -- expressions are highlighted within the input field for readability.

Safe evaluation

Expressions are sandboxed for security. Only supported operators and field references are allowed. Arbitrary code execution is not possible through expressions.

Execution Inspector

After a workflow executes, click any node to open the execution inspector. It shows:

Input data -- what the node received from upstream.
Output data -- what the node produced.
Execution time -- how long the node took.
Error details -- if the node failed, the full error message and stack trace.

Data Pinning

You can pin execution data on any node. Pinned data persists across page reloads and is used by the expression editor for live previews. This is useful when building and testing expressions -- pin the data once, then edit expressions without re-executing the workflow.

Alignment Tools

Select multiple nodes and use the alignment toolbar to snap them into alignment. Available options:

Align left, center, or right (horizontal axis).
Align top, middle, or bottom (vertical axis).
Distribute evenly (horizontal or vertical spacing).

Sticky Notes

Add sticky notes to the canvas to annotate your workflows. Sticky notes support Markdown formatting and can be repositioned and resized like any other canvas element. Use them to document complex logic, leave notes for teammates, or mark sections of the workflow.

Required Field Validation

The Canvas enforces schema-driven validation on all nodes. When a required field is missing or invalid:

Amber badge on the node -- a small warning badge appears on the node itself, visible even when zoomed out.
Red borders in the config panel -- invalid fields are highlighted with red borders and error messages in the node configuration panel.
Pre-execution blocking -- the workflow will not execute if any node has unresolved validation errors. A summary dialog lists all invalid nodes and their issues.

Fix validation errors quickly

Click on any amber badge to jump directly to the node's configuration panel with the invalid field scrolled into view.

AI Workflow Builder

The AI Workflow Builder lets you generate entire workflows from a natural language description. Click the "Generate with AI" button in the canvas toolbar and describe what you want:

Example prompt

When a new row is added to my Google Sheet "Leads",
send a welcome email via Gmail and post a notification
to the #sales Slack channel with the lead's name and email.

The AI analyses your description and generates a complete workflow with the appropriate trigger, action nodes, connections, and pre-filled configuration. You can then review, modify, and save the workflow like any other.

Review before executing

AI-generated workflows are a starting point. Always review the generated configuration -- especially credentials, target channels, and email addresses -- before executing.

Credentials

Simple Flow