> ## Documentation Index
> Fetch the complete documentation index at: https://docs.voiceblox.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Canvas Basics

> Navigate the drag-and-drop canvas, place nodes, and use keyboard shortcuts.

# Canvas Basics

The Voiceblox canvas is built on [React Flow](https://reactflow.dev).

## 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

1. Hover over a node to reveal its **handles** (colored dots on the edges)
2. Click and drag from an output handle
3. Release on a compatible input handle

Voiceblox enforces [connection rules](/building-flows/connecting-nodes): only compatible handle types can connect.

## 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)          |

## Moving and arranging nodes

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