Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/GraphiteEditor/Graphite/llms.txt

Use this file to discover all available pages before exploring further.

Mastering node graph manipulation lets you build complex, fully parameterized artwork that can be tweaked at any time without redoing any manual work. Once you understand how to wire nodes together and expose values, the same techniques apply regardless of which specific nodes you use — the graph is a universal composition system.

​
Adding Nodes

Nodes can be added to the graph in two ways:
  • Right-click on an empty area of the graph background to open the node search popover.
  • Type in the search field to filter by name or category, then click a result or press Enter to insert the highlighted node.
Newly placed nodes snap to a grid so that wires align cleanly. You can drag a node off-grid if you prefer free placement.

​
Connecting Nodes

1

Locate the output connector

Find the small colored dot on the right side of the source node. Its color indicates the data type it produces (for example, blue for vector geometry, orange for raster images).
2

Drag to the input connector

Click and drag from the output connector toward the left side of the destination node. A preview wire follows your cursor.
3

Release over the input connector

Drop onto the matching input connector on the destination node. If the types are compatible, the connection is established and data begins flowing. If they are incompatible, the connection is rejected and the wire disappears.
Connectors are color-coded by data type. Attempting to connect mismatched types — for example, a math number output into a vector geometry input — will be rejected, protecting the graph from type errors.

​
Disconnecting Links

There are two ways to break an existing connection:
  • Click and drag the wire away from either end of it. The wire detaches and you can drag the loose end to a new connector, or release it into empty space to delete the connection entirely.
  • Drag a new wire to an occupied input to replace the old connection. Each input can hold only one incoming wire; the previous connection is automatically removed when you make a new one.

​
Configuring Parameters

Clicking a node or layer selects it. Its parameters immediately appear in the Properties panel on the right side of the screen.
  • Numeric sliders can be dragged left/right or double-clicked to type an exact value.
  • Color pickers, dropdowns, toggles, and other widget types vary by parameter.
  • Edits are applied in real time — the canvas updates as you drag.
Parameters shown in the Properties panel are the same inputs visible as connectors on the left side of the node in the graph. Any parameter can be set by value in the Properties panel or driven by a wire from another node’s output.

​
Exposing Parameters

Exposing a parameter is one of the most powerful techniques in Graphite’s node graph. It transforms a static value into a dynamic input that can be driven by any upstream computation — for example, feeding the output of a Math node into the Radius of a Circle node so the radius responds to an animated or derived value.
To expose a parameter:
  1. In the Properties panel, find the parameter you want to expose.
  2. Click the small expose button (a circle icon) to the left of the parameter name.
  3. The parameter transforms into a connector on the left side of the node, and the value widget in the Properties panel is replaced by a wire attachment point.
  4. Connect any compatible node’s output to that new connector.
To un-expose a parameter, click the expose button again. The connector is removed and the parameter reverts to a directly-editable value widget.

​
Previewing Node Output

You can inspect the output of any intermediate node without modifying the actual graph output:
  • Alt-click any node in the graph to toggle its preview mode.
  • While a node is being previewed, it is highlighted with a dashed, brighter border and the canvas renders its output instead of the final Output node’s output.
  • Alt-click again (or click End Preview in the control bar) to restore the final Output node as the active output.
This is non-destructive — no wires are changed when you preview a node. It is the fastest way to understand what each stage in a complex chain is producing.

​
Hiding and Bypassing Nodes

Hiding a node bypasses it in the data flow:
  • Press Ctrl+H (macOS: ⌘+H) with a node selected, or click Make Hidden in the control bar.
  • When a node is hidden, Graphite treats it as if it were removed from the chain. Data passes through the hidden node’s position unmodified.
  • This is equivalent to clicking the eye icon in the Layers panel for layer nodes.
Hiding is useful when you want to temporarily disable an effect to compare the before and after without permanently removing the node.

​
Organizing the Graph

As graphs grow in complexity, keeping them readable becomes important:
  • Moving nodes: Click and drag any node to reposition it. Multiple nodes can be moved together after box-selecting them.
  • Box selection: Click and drag on an empty area of the graph background to draw a selection rectangle. All nodes touching the rectangle are selected.
  • Multi-select: Hold Shift while clicking nodes to add them to the current selection.
  • Grouping nodes: With nodes selected, press Ctrl+G to encapsulate them into a new subgraph node. The selected nodes move inside the subgraph, and a single representative node appears in their place. Double-click the subgraph node to enter it and edit its contents.
  • Alignment and spacing: Nodes can be freely positioned; there is no automatic layout, so you control the visual arrangement entirely.

Node Graph Overview

Understand the fundamentals of networks, layers vs. nodes, and how the graph is structured.

Node Reference

Browse the full library of built-in nodes organized by category.

Build docs developers (and LLMs) love

Get started for freeTalk to us