The node graph
The canvas where you build everything in DNA — add nodes, wire them together, and watch data flow.
The node graph is your main workspace. Every node you see is part of your project: there's no hidden state, just the nodes you place and the wires between them. This page covers getting around the canvas, adding nodes, and connecting them up.
Getting around
Pan and zoom to frame the part of your graph you're working on.
Pan by dragging the empty background, or with your trackpad's two-finger scroll.
Zoom with the scroll wheel or pinch gesture, centred on your cursor.
The graph and the The viewport share the same framing, so as your project grows you can fly around it without losing your place.
Adding nodes
Press Tab anywhere on the canvas to open the search palette right at your cursor.
Start typing to fuzzy-match by node name, description, or tag — you don't need the exact name.
You can even match an option inside a node: typing a setting's name surfaces nodes that have it, shown as a blue capsule.
Use the family tabs (Shapes, Effects, Logic, and so on) to browse by category.
Arrow keys move through results, Enter adds the highlighted node, Escape closes the palette.
The footer shows a short description of whatever's highlighted, so you can learn nodes as you go.
Tab is the fastest way to work. Most artists never touch a node menu — they just Tab, type a few letters, and hit Enter.
Wiring nodes together
Nodes connect through sockets — the dots along their edges. Outputs sit on the right, inputs on the left. To connect two nodes, drag from one socket to another and release.
As you drag a wire, DNA helps you land it:
Snap magnetism — compatible sockets within reach light up and the wire snaps to the nearest one. Sockets that can't accept the connection dim out, so you always know where a wire will actually stick.
DNA connects compatible-but-different data for you automatically. If a wire crosses, say, a single number into a slot that wants a position, it just works — hover the wire and a tooltip names the conversion. See Automatic conversion.
Socket shapes tell you what kind of data flows through:
Circle — a regular value (most sockets).
Diamond — per-item data, like one value for each point.
Capsule — accepts several wires at once. The order matters and is stacked bottom-to-top; drag the wires to reorder. Layer fusion uses this.
Splice a node onto a wire
Drop a new node right on top of an existing wire and it splices itself in — the wire reroutes through the new node automatically, no rewiring needed. As you drag, the wire you're about to splice into highlights so you can see the result before you commit.
This works whether you add the node from the Tab palette or duplicate one with Alt-drag.
Peel off a connection
To move a connection somewhere else, grab a wire near either end and drag — that end detaches and follows your cursor, ready to drop on a new socket. The end nearer your cursor is the one that lets go. It's quicker than deleting and redrawing.
Right-click a wire instead to get its menu: disconnect, or insert a node.
Selecting and arranging
Click a node to select it; Shift-click to add to the selection.
Drag a box across empty canvas to marquee-select everything inside.
Right-click a node for its menu — bypass, solo, duplicate, delete, set colour, or group.
A faint trail of particles runs along active wires in the direction data is flowing, so you can read your graph at a glance.
The node title bar
Each node's coloured title bar tells you its state without opening anything. The colour groups nodes by family, and small icons flag what's going on — bypassed, soloed, currently cooking, or showing an error. See Node controls for what each control does.
Imported or generated graphs that arrive without saved positions are auto-arranged into tidy left-to-right layers for you.