Canvas Basics
The Voiceblox canvas is built on React Flow.Layout
- Left sidebar — Node palette organized by category. Drag any node onto the canvas.
- Canvas — The main working area. Pan and zoom freely.
- Top toolbar — Undo, redo, clear, AI generator, export, and test buttons.
- Properties Panel — Appears when you select a node. Configure its parameters on the right.
Navigation
| Action | How |
|---|---|
| Pan | Click and drag on empty canvas area |
| Zoom | Scroll wheel / pinch on trackpad |
| Select node | Click it |
| Multi-select | Hold Shift and click, or drag a selection box |
| Deselect | Click on empty canvas |
Placing nodes
Drag a node type from the left sidebar onto the canvas and release to place it.Connecting nodes
- Hover over a node to reveal its handles (colored dots on the edges)
- Click and drag from an output handle
- Release on a compatible input handle
Keyboard shortcuts
| Shortcut | Action |
|---|---|
Cmd/Ctrl + C | Copy selected node(s) |
Cmd/Ctrl + V | Paste node(s) |
Backspace / Delete | Delete selected node(s) or edge |
Cmd/Ctrl + Z | Undo |
Cmd/Ctrl + Shift + Z | Redo |
Arrow keys | Nudge selected node(s) |