Nodes

Nodes are the unit of work on the canvas. Every object you create — an uploaded image, a text block, a shape, a prompt, an AI generation step — is a node with a position, a size, a type, and its own data. The canvas is the space; nodes are the things in it, and edges are how they pass data to one another.

What a node stores

Each node carries a small, consistent set of fields plus a type-specific data payload:

• Type — what kind of node it is. The type determines its appearance, its data shape, and which input and output ports it exposes.
• Position and size— the node's world coordinates and its width and height in canvas pixels.
• Data — the type-specific payload. A text node stores its text, a prompt node stores its prompt, an image node stores its media reference and display transform, and a generation node stores its model and parameters.
• Layer order — a z-index that controls which node sits on top when nodes overlap.

Broad families of nodes

The Add node menu groups the available types into a few practical families:

• Media and layout — Image, Video, Audio, Shape, Text, Document, and Code. These hold content you bring in or author directly.
• AI generation — Easy Connect, Prompt, AI Text, AI Image, AI Video, Text to Speech, Speech to Speech, and AI SFX. These produce new content, usually from a prompt and optional references. See Prompt Node Architecture for how prompt and generation nodes are wired together.
• Automation — Webhook and Webhook Trigger, used to send and receive data from outside the canvas.

Add a node

1. 1

   Open the Add node menu

   Use the plus button in the floating toolbar at the bottom of the canvas. The menu lists every node type grouped by family. See Panels for the rest of the toolbar.

2. 2

   Pick a type

   Choosing a type creates a new node and selects it. Image insertion is the exception: instead of dropping an empty node, it opens a file picker and places the picked image at its native size.

3. 3

   Or drag content in

   Dragging supported files onto the canvas creates the matching media nodes directly. A drop overlay appears while a drag is over the canvas.

Selection

Selection is what tells the canvas which nodes your next action applies to, and it drives the contextual tools in the toolbar.

• Click a node to select just that node.
• Marquee — drag across empty canvas to select every node the rectangle touches.
• Keyboard navigation — with the canvas focused, the arrow keys move the selection between nodes, and Home and End jump to the first and last.
• Clear — clicking empty canvas clears the selection.

Move, resize, and delete

• Move — drag a selected node to reposition it. Dragging a node that is part of a multi-selection moves the whole group together.
• Resize — drag the resize handle on a selected node. Media nodes preserve their aspect ratio where they store one.
• Delete — press Delete or Backspace with a selection while the canvas (not a text field) has focus. Deleting nodes also removes the edges attached to them, and the whole removal undoes as a single step.

Common node UI

Most node types share the same surrounding chrome so they feel consistent regardless of what they hold:

• A type label that identifies the node, typically shown on hover or when the node is selected.
• Ports— the input and output connection points along the node's edges. Dragging from a port starts an edge. The set of ports a node shows depends on its type.
• A resize handle on the selected node.
• Status and footer chrome — for example, generation nodes surface progress and errors, and prompt-style nodes show how many outgoing connections they feed.