> ## Documentation Index
> Fetch the complete documentation index at: https://canvas-docs.vibeflow.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# Keyboard shortcuts
> Every keystroke the canvas editor responds to.
The agent does the typing. You drive the canvas.
Modifiers use Mac notation: `⌘` = Cmd (Ctrl on Windows), `⌥` = Alt/Option, `⇧` = Shift, `⌃` = Control.
## Tools
| Key | Tool |
| ------- | ------------------------------------------- |
| `V` | Select / move |
| `A` | Direct select (drill into elements & nodes) |
| `H` | Hand (pan) |
| `P` | Pen — draw vector paths from scratch |
| `⇧` `P` | Pencil / freehand sketch |
| `R` | Rectangle |
| `O` | Ellipse |
| `L` | Line |
| `F` | Drop a blank frame |
| `T` | Drop a text node |
| `C` | Comment (AI Pointer) |
`R`, `O`, and `L` all activate the **Shapes** tool with that shape pre-selected. Polygon and star are picked from the floating shape toolbar. Every shape is born as an editable vector — draw it, then press `V` and double-click to refine its nodes.
## Pen tool
Draw brand-new vector paths inside the selected frame. Press `P`, then:
| Action | Shortcut |
| --------------------------------------- | --------------------------------------- |
| Add a corner point | Click |
| Add a smooth point (pull curve handles) | Click + drag |
| Close the path | Click the first anchor (a ring appears) |
| Finish the path (leave it open) | `Enter` · double-click · right-click |
| Remove the last point | `Delete` · `Backspace` |
| Finish, or exit the tool | `Esc` |
## Shape tools
Drag on the canvas to draw. Press `R` / `O` / `L` (or pick from the toolbar), then:
| Action | Shortcut |
| -------------------------------------- | ----------------------- |
| Draw the shape | Drag |
| Constrain (square · circle · 45° line) | Hold `⇧` while dragging |
| Leave the tool | `Esc` |
## Vector & path editing
Double-click a path (or press **Edit path** in the inspector) to edit its nodes.
| Action | Shortcut |
| ----------------------------------- | --------------------------------- |
| Move an anchor or handle | Drag |
| Add a point on a segment | Double-click the segment |
| Toggle anchor smooth ↔ corner | Double-click the anchor · `⇧` `C` |
| Convert an anchor (corner ↔ smooth) | `⌥` + click the anchor |
| Break handle mirroring (asymmetric) | `⌥` + drag a handle |
| Join / weld / close the path | `⌘` `J` |
| Delete the active anchor | `Delete` · `Backspace` |
| Exit node editing | `Esc` · `Enter` |
The cursor tells you the action before you click: it shows **move** over an anchor, a **crosshair** over a handle, and a **copy** cursor over the path body (where a double-click adds a point).
## Appearance (inspector)
No keys — these live in the right-hand **Vector** panel when a path is selected:
* **Paint** — solid fill/stroke, stroke width, opacity
* **Stroke style** — solid / dash / dot, line cap (butt/round/square), join (miter/round/bevel)
* **Gradient** — linear or radial, two-stop, with angle
* **Effects** — drop shadow, blur, and all 16 blend modes
* **Path** — close · open · reverse · flip H/V
## Viewport
| Action | Shortcut |
| ------------------ | ------------------------------------------------- |
| Pan | `Space` + drag · middle mouse · two-finger scroll |
| Zoom | `⌘` / `Ctrl` + scroll · pinch |
| Reset zoom to 100% | (right sidebar zoom indicator → reset) |
## Selection
| Action | Shortcut |
| ---------------------------------------- | ----------------------- |
| Select frame or element | Click |
| Deep-select the element under the cursor | `⌘` / `Ctrl` + click |
| Multi-select | `⇧` + click |
| Marquee select | Drag in empty space |
| Cycle sibling layers | `Tab` · `⇧` `Tab` |
| Drill into first child | `Enter` |
| Walk selection up one level | `Esc` |
| Clear selection | `Esc` |
| Frame drag mode (over content) | Hold `⌥` while dragging |
## Arrange & transform
| Action | Shortcut |
| ----------------------------------- | ------------------------------- |
| Nudge / big nudge | Arrow keys · `⇧` + arrow (20px) |
| Bring forward / send backward | `]` · `[` |
| Group / ungroup | `⌘` `G` · `⇧` `⌘` `G` |
| Constrain proportion while resizing | Hold `⇧` |
| Resize from center | Hold `⌥` |
## Editing
| Action | Shortcut |
| ------------------------- | ------------------------------------------------------ |
| Enter frame (direct edit) | Double-click |
| Exit frame edit | `Esc` |
| Delete selection | `Delete` · `Backspace` |
| Undo | `⌘` / `Ctrl` + `Z` |
| Redo | `⇧⌘Z` · `⌘Y` · `Ctrl` + `Y` |
| Duplicate | `⌘` / `Ctrl` + `D` |
| Copy | `⌘` / `Ctrl` + `C` (frames or elements inside a frame) |
| Cut | `⌘` / `Ctrl` + `X` |
| Paste | `⌘` / `Ctrl` + `V` (across canvases too) |
## Text editing (inside a text element)
| Action | Shortcut |
| ------------------------- | --------------------------- |
| Bold · italic · underline | `⌘` `B` · `⌘` `I` · `⌘` `U` |
| Ordered / bulleted list | `⌘` `⇧` `7` · `⌘` `⇧` `8` |
| Finish editing | `⌘` `Enter` · `Esc` |
## Chat composer
| Action | Shortcut |
| ------------------ | ------------------------------------------ |
| Send message | `Enter` |
| New line | `Shift` + `Enter` |
| Attach image | Click paperclip · drag image into composer |
| Pick design system | Click layers icon |
| Pick style preset | Click palette icon |
## Comment composer (after clicking an element)
| Action | Shortcut |
| ------------------------------ | -------- |
| Add element + note to chat | `Enter` |
| Close composer without staging | `Esc` |
## Home composer (the `/home` page)
| Action | Shortcut |
| --------------- | ---------------------- |
| Generate canvas | `⌘` / `Ctrl` + `Enter` |
***
## Things that don't have shortcuts yet
We're honest about gaps. None of these exist today:
* **Cmd + K command palette** in the canvas editor
* **Boolean ops** (union / subtract / intersect / exclude) key bindings
* **Cmd + F** to find a frame by name or contents
If any of these would change your day-to-day, tell us at [founders@vibeflow.ai](mailto:founders@vibeflow.ai).