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.
Where this fits
The workflow editor is NodeTool’s automation layer. A workflow reads assets, calls AI models, and generates new assets.
These new assets can then be:
- Sent to the Sketch Editor or Video Editor for manual adjustments.
- Packaged as a Mini-App for non-technical users.
Everything connects back to the same shared asset store and AI models.
See Key Concepts → How everything fits together for the full loop.
Editor Layout
| Area | Where | What It Does |
|---|---|---|
| Canvas | Center | Place and connect nodes |
| Side Panels | Left | Workflows, nodes, assets, timelines, sketches, favorites |
| Composer | Bottom | Chat, run, save, auto-layout |
Canvas Basics
Your infinite workspace.
Navigate:
| Do This | How |
|---|---|
| Pan | Space + drag, or right-click drag |
| Zoom | Ctrl/⌘ + scroll |
| Fit everything | F |
| Reset zoom (to 50%) | Ctrl/⌘ + 0 |
The grid helps align nodes. Turn on Snap to Grid in the View menu of the
desktop app, from the command menu (Ctrl/⌘ + K), or in Settings → General.
The grid size is the Grid Snap Precision setting.
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
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
Stopping a Run
| Method | How |
|---|---|
| Button | Click Stop (shown only while the run state is running) |
| Keyboard | Esc |
Organizing Your Workflow
Auto Layout
Click the Auto Layout button in the floating toolbar to automatically arrange your nodes in a clean, readable layout. The editor also auto-arranges nodes when Chat creates or modifies workflows. (There is no keyboard shortcut for auto-layout — it’s a toolbar button only.)
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 |
Left Panel
Access these views by clicking icons on the left rail: Nodes, Workflows, Sketches, Timelines, Settings, History, Favorites, Assets, and Agent. See Editor Panels → Left Panel for details on each.
Right Panel (Inspector)
- Detailed properties for selected nodes
- Input/output documentation
- Validation errors and warnings
The right panel hosts only the Inspector. Logs, Queue, Trace, Version History, and Workspace live in the Bottom Panel.
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
Quick Add
Ctrl/⌘ + Shift + A skips the browsing and goes straight to a search box — type a node name, hit Enter, and it lands on the canvas.
Find in Workflow
Ctrl/⌘ + F searches the workflow you already have: node names, types, and property values. Matches highlight on the canvas and the view pans to the one you pick.
Node Documentation
Get help on any node:
- In the Node Menu: Hover over a node to see its description
- 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, copy as JSON, duplicate, delete, group, bypass |
| Input/Output | Disconnect, add compatible node |
| Connection | Delete, add node in middle |
Copy as JSON puts the node’s data — its property values, title, and dynamic slots — on the clipboard as formatted JSON. Paste it into a bug report, or hand it to an agent.
Built-in Editors
NodeTool includes professional editing tools for creative work.
Sketch Editor
Open a blank canvas (+ New → New image in the workspace tab bar) or edit an existing image to use the full layered editor:
- Layers: Control blend modes, opacity, and visibility.
- Painting: Brush, pencil, eraser, fill, gradient, blur, and clone stamp tools.
- Shapes & Transform: Add shapes (rectangle, ellipse, line, arrow), crop, or freely transform layers.
- AI Generation: Create a layer directly from a text prompt or connect it to a workflow.
- History: Unlimited undo and redo steps.
📖 Full Guide: See Sketch Editor for complete documentation with tool reference, shortcuts, and workflows.
Text and Code Editor
Long text or code properties open in a full editor featuring syntax highlighting, line numbers, and search. This is the same editor used for code nodes.
DataFrame Editor
Edit tabular data just like a spreadsheet: add or remove rows and columns, edit cell values, and sort your data.
Image Comparer
Preview nodes with before/after images show a slider. Drag it left or right to compare the two images.
Color Picker
The 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 50% |
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 |
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