The canvas: place nodes, connect ports, run, debug. Covers basic navigation through node bypass and auto layout.
New here? Start with Getting Started, then come back.
For panel-by-panel detail, see Editor Panels.
Editor Layout
| Area | Where | What It Does |
|---|---|---|
| Canvas | Center | Place and connect nodes |
| Side Panels | Left/Right | Workflows, assets, settings |
| Toolbar | Bottom | Run, save, layout controls |
Canvas Basics
Your infinite workspace.
Navigate:
| Do This | How |
|---|---|
| Pan | Space + drag, or right-click drag |
| Zoom | Ctrl/⌘ + scroll |
| Fit everything | F |
| Reset zoom | Ctrl/⌘ + 0 |
The grid helps align nodes. Turn on Snap to Grid in View menu.
Working with Nodes
Each node does one thing.
Add Nodes
Space bar:
- Press
Spaceanywhere - Type what you want (“image”, “text”)
- Click to add
Double-click:
- Double-click empty space
- Opens node menu
Smart connect:
- Drag from a node’s output
- Drop on empty space
- See compatible nodes
Node Structure
- Header (top) - Name, drag to move
- Inputs (left circles) - Data in
- Outputs (right circles) - Data out
- Properties - Settings panel
Select Nodes
| Do This | How |
|---|---|
| One | Click it |
| Multiple | Shift + click, or drag box |
| All | Ctrl/⌘ + A |
| None | Click canvas |
Move Nodes
- Drag header to move
- Arrow keys to nudge
- Auto Layout button to organize
Bypass Nodes
Skip temporarily without deleting:
- Right-click node
- Select Bypass Node
- Node dims, data passes through
Good for:
- Testing - Compare with/without
- Debugging - Isolate problems
- A/B testing - Toggle effects
Re-enable: Right-click → Enable Node
Result Overlays
Nodes show outputs on canvas:
- Images - Thumbnail preview
- Text - Text snippet
- Audio - Waveform
- Progress - Live status
Connections
Connections are the lines between nodes that show how data flows through your workflow. Data always flows left to right — from output ports (right side of a node) to input ports (left side of another node).
Make Connections
- Click output circle (right side)
- Drag the line to an input circle (left side of another node)
- Release to connect
Connection Rules
- Types must match: You can only connect compatible types (text to text, image to image)
- One input, multiple outputs: Each input accepts one connection; outputs can connect to many
- Color coding: Connection colors indicate data type
Removing Connections
- Click a connection line, then press
Delete - Right-click a connection for options
- Drag the connection away from its target and release
Smart Connections
When you drag a connection and release on empty space, the Connection Menu appears:
- Auto-create common nodes for that data type
- Browse compatible nodes filtered by what can receive the data
- Cancel by pressing
Esc
Running Workflows
Starting a Run
| Method | How |
|---|---|
| Button | Click Run in the bottom toolbar |
| Keyboard | Ctrl/⌘ + Enter |
Watching Progress
- Streaming nodes show output as it’s generated
- Preview nodes display intermediate results
- Node borders indicate status (running, complete, error)
- Edge animations show data flowing between nodes
Pausing and Resuming
You can temporarily pause a running workflow:
| Action | Button | Description |
|---|---|---|
| Pause | ⏸ (blue) | Temporarily stops execution - workflow state is preserved |
| Resume | ▶ (blue) | Continues from where it paused |
The pause button appears in the floating toolbar while a workflow is running.
Suspended Workflows
Some nodes (like the WaitNode) can suspend a workflow to wait for external input:
| State | Button | Description |
|---|---|---|
| Suspended | ▶ (purple) | Workflow is waiting for input - click to resume |
When a workflow is suspended:
- A notification shows why the workflow is waiting
- The purple Resume button appears in the toolbar
- Click Resume to continue the workflow with any required data
- The workflow can be stopped (cancelled) if no longer needed
Suspended workflows are useful for:
- Human-in-the-loop approvals
- Waiting for external data or API responses
- Checkpoint-based processing where you review intermediate results
Stopping a Run
| Method | How |
|---|---|
| Button | Click Stop (enabled when running, paused, or suspended) |
| Keyboard | Esc |
Missing Models
If a node needs an AI model you haven’t installed:
- Click the “Missing Model” indicator on the node
- The Recommended Models dialog opens
- Click to install – runs in background while you work
Organizing Your Workflow
Auto Layout
Click the Auto Layout button (or press L) to automatically arrange your nodes in a clean, readable layout. The editor also auto-arranges nodes when Global Chat creates or modifies workflows.
Grouping Nodes
Select multiple nodes and press Ctrl/⌘ + G to group them. Groups:
- Keep related nodes together
- Can be collapsed to save space
- Move as a unit
Aligning Nodes
| Shortcut | Action |
|---|---|
A |
Align selected nodes |
Shift + A |
Align and distribute evenly |
Panels and Tabs
Multiple Workflows
- Open multiple workflows in tabs at the top
- Switch with
Ctrl/⌘ + 1-9or click the tab - Drag tabs to reorder
Left Panel
Access these views by clicking icons on the left:
| Icon | Panel | Purpose |
|---|---|---|
| 📂 | Workflows | Your saved workflows |
| 💬 | Chat | Global Chat |
| 📁 | Assets | Your files |
| 📚 | Collections | RAG document collections |
| 📦 | Packs | Installed node packs |
Right Panel (Inspector)
Press i to toggle the Inspector panel, which shows:
- Detailed properties for selected nodes
- Input/output documentation
- Validation errors and warnings
See Editor Panels → Right Panel for every tab (Inspector, Logs, Jobs, Agent, Trace, Version History, Workspace).
Finding Nodes
The Node Menu
Press Space to open, then:
- Search: Just start typing (“whisper”, “image”, “agent”)
- Browse: Explore the category tree on the left
- Filter: Click the filter icon to show only nodes with specific input/output types
- Move: Drag the menu to reposition it
- Close:
Escor click outside
Node Documentation
Get help on any node:
- In the Node Menu: Hover over a node to see its description
- On the canvas: Hover over the
?icon at the bottom-right of any node - Inspector: Select a node and view full documentation in the right panel
Context Menus
Right-click for options anywhere:
| Location | Options |
|---|---|
| Canvas | Add node, paste, select all |
| Node header | Copy, duplicate, delete, group, bypass |
| Input/Output | Disconnect, add compatible node |
| Connection | Delete, add node in middle |
Built-in Editors
NodeTool includes professional editing tools for creative work.
Image Editor
Click the edit icon on image outputs or properties to open the full-featured editor:
- Crop & Resize: Adjust image dimensions and composition
- Rotate & Flip: Transform orientation
- Draw Tools: Brush, shapes, and text overlays
- Adjustments: Brightness, contrast, saturation controls
- History: Undo/redo all changes
📖 Full Guide: See Image Editor for complete documentation with tool reference, shortcuts, and workflows.
Color Picker
The professional color picker appears when selecting colors in properties:
- Visual Selection: Saturation/brightness picker with hue slider
- Multiple Formats: Enter values as HEX, RGB, or HSL
- Harmony Modes: Complementary, triadic, analogous color suggestions
- Gradient Builder: Create and edit color gradients
- Swatches: Save and reuse favorite colors
- Contrast Checker: Verify accessibility compliance
- Eyedropper: Pick colors from anywhere on screen
Keyboard Shortcuts
Essential Shortcuts
| Shortcut | Action |
|---|---|
Space |
Open node menu |
Ctrl/⌘ + Enter |
Run workflow |
Ctrl/⌘ + S |
Save |
Ctrl/⌘ + Z |
Undo |
F |
Fit view |
Esc |
Stop / Cancel |
All Editor Shortcuts
| Shortcut | Action |
|---|---|
Ctrl/⌘ + C |
Copy |
Ctrl/⌘ + V |
Paste |
Ctrl/⌘ + X |
Cut |
Ctrl/⌘ + D |
Duplicate horizontally |
Ctrl/⌘ + Shift + D |
Duplicate vertically |
Ctrl/⌘ + G |
Group selection |
Ctrl/⌘ + 0 |
Reset zoom to 100% |
Ctrl/⌘ + 1-9 |
Switch to tab 1-9 |
A |
Align selected nodes |
Shift + A |
Align and distribute |
Arrow keys |
Nudge selected nodes |
Delete / Backspace |
Delete selection |
i |
Toggle Inspector |
1-5 |
Open left panel menus |
Tips
Design Principles
- Left to right — Arrange nodes so data flows left to right across the canvas for readability
- Preview often — Add Preview nodes after each major step to inspect intermediate results
- Name clearly — Rename nodes (double-click the header) to describe their purpose, e.g., “Resize to 512px” instead of “Resize”
- Group logically — Keep related nodes together and use Groups (
Ctrl/⌘ + G) to visually organize complex workflows
Debugging
- Add Preview nodes between steps to see exactly what data each node produces
- Check connections — verify data types match (connection colors indicate type)
- Look at node borders — red = error, yellow = running, green = completed
- Test incrementally — bypass downstream nodes and run partial workflows to isolate problems
- Use the Inspector — press
ito see detailed error messages and validation warnings
Performance
- Local models — slower but work offline and are free to use
- Cloud models — faster response times, require internet and API keys
- Streaming nodes — show progress during long-running operations (look for the streaming indicator)
- Parallel branches — NodeTool automatically runs independent branches in parallel for faster execution
Next Steps
- Cookbook – Workflow patterns and best practices
- Workflow Examples – Ready-to-use workflows
- Tips & Tricks – Power user features
- Node Reference – All available nodes