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.

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

Drag a node type from the left sidebar onto the canvas and release to place it.

Voiceblox enforces connection rules: only compatible handle types can connect.

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)

Click and drag any node to reposition it. After AI generation, click Auto-arrange in the toolbar to tidy up the layout.