My Canvas
The canvas is your main creative area. It’s infinite, supports zoom and pan, and lets you organize complex logic freely.
Interface Overview
Main parts of the interface:
- Center Canvas: place all nodes.
- Pan: Drag with middle mouse, or use trackpad with two fingers.
- Zoom: Mouse wheel or trackpad pinch.
- Top Navbar:
- Shows workflow name.
- Switch between Edit / Preview modes.
- Access profile and asset library.
- Bottom Toolbar:
- Add Node (+): open node picker.
- Select Mode: box-select multiple nodes for bulk actions (move/delete).
- Undo/Redo: revert mistakes.
- Side Panels:
- Help: shortcuts and explanations.
- Assets: manage uploads and generation history.
Node Basics
Each node consists of:
- Title Bar: node type and name (double-click to rename).
- Content Area: input text, show images, or play videos.
- Handles:
- Left Handle: input.
- Right Handle: output.
- Colors:
- 🟡 Text
- 🟢 Image
- 🔵 Video
- 🟣 Multi-modal
Connections
Connecting nodes is like wiring:
- Drag from source output to target input.
- Compatibility Check: eligible inputs highlight to avoid mismatches.
Shortcuts
| Action | Mac | Windows |
|---|---|---|
| Create Node | Space | Space |
| Copy | Cmd + C | Ctrl + C |
| Paste | Cmd + V | Ctrl + V |
| Delete | Backspace | Del |
| Undo | Cmd + Z | Ctrl + Z |
| Group / Ungroup | Cmd + G / Cmd + Shift + G | Ctrl + G / Ctrl + Shift + G |
LOD View (Automatic Performance Optimizations)
When your workflow becomes large, the canvas automatically adjusts the level of detail (LOD) based on zoom:
- Zoomed out: nodes are rendered as lighter blocks/thumbnail views with reduced effects, prioritizing smooth pan/zoom.
- Zoomed in: nodes show full content (text, parameters, media previews, etc.).
Tips:
- If node content looks simplified, this is expected at low zoom. Zoom in to see details.
- For huge graphs, do layout at a zoomed-out “structure view”, and edit details at a closer “content view”.
Debug Info Panel (Per-node Diagnostics)
Some nodes show an Info icon in the header. Hovering it opens a Debug Info panel that helps you understand and debug node behavior.
Typical fields include:
- Task: Job ID, Provider Task ID, model, status, start/finish time, duration, error message.
- Media: resolution, duration, original URL, whether it goes through Proxy (useful for expired links / CORS issues).
When reporting an issue, copy Job ID / Provider Task ID / status / error from this panel to greatly speed up troubleshooting.