| layout | page |
|---|---|
| title | Workflow Editor |
| description | The canvas — build, test, refine. |
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.
The workflow editor is NodeTool's automation layer. A workflow reads assets, calls models, and writes new assets — which flow on into the Sketch Editor and Video Editor for hand editing, come back as fresh assets, or ship to non-technical users as a Mini-App. Every surface shares this graph's outputs through one asset store and the same model/provider system.
See Key Concepts → How everything fits together for the full loop.
| 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 |
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 View menu.
Each node does one thing.
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
- Header (top) - Name, drag to move
- Inputs (left circles) - Data in
- Outputs (right circles) - Data out
- Properties - Settings panel
| Do This | How |
|---|---|
| One | Click it |
| Multiple | Shift + click, or drag box |
| All | Ctrl/⌘ + A |
| None | Click canvas |
- Drag header to move
- Arrow keys to nudge
- Auto Layout button to organize
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 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).
- Click output circle (right side)
- Drag the line to an input circle (left side of another node)
- Release to connect
- 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
- Click a connection line, then press
Delete - Right-click a connection for options
- Drag the connection away from its target and release
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
| Method | How |
|---|---|
| Button | Click Run in the bottom toolbar |
| Keyboard | Ctrl/⌘ + Enter |
- 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
| Method | How |
|---|---|
| Button | Click Stop (enabled when running, paused, or suspended) |
| Keyboard | Esc |
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.)
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
| Shortcut | Action |
|---|---|
A |
Align selected nodes |
Shift + A |
Align and distribute evenly |
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.
- 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.
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
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.
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.
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
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 |
NodeTool includes professional editing tools for creative work.
Open a blank canvas from + New → New image in the workspace tab bar, or edit an existing image asset, to use the full layered editor:
- Layers: Blend modes, per-layer opacity, lock, and visibility
- Painting: Brush, pencil, eraser, fill, gradient, blur, clone stamp
- Shapes & transform: Rectangle, ellipse, line, arrow, crop, free transform
- AI generation: Generate a layer from a prompt or bind it to a workflow
- History: Unlimited undo/redo
📖 Full Guide: See Sketch Editor for complete documentation with tool reference, shortcuts, and workflows.
Long string properties open in a full editor with syntax highlighting, line numbers, and search — the same surface used for code nodes.
Tabular values are edited as a spreadsheet: add and remove rows and columns, retype cells, and sort.
Preview nodes that hold a before/after pair render a slider you drag across the two images.
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
| Shortcut | Action |
|---|---|
Space |
Open node menu |
Ctrl/⌘ + Enter |
Run workflow |
Ctrl/⌘ + S |
Save |
Ctrl/⌘ + Z |
Undo |
F |
Fit view |
Esc |
Stop / Cancel |
| 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 |
- 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
- 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
- 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
- Cookbook – Workflow patterns and best practices
- Workflow Examples – Ready-to-use workflows
- Tips & Tricks – Power user features
- Node Reference – All available nodes