The canvas
Keyboard shortcuts
Every shortcut the editor responds to. Cmd on macOS is Ctrl on Windows and Linux — the editor accepts either everywhere both are listed.
Canvas
| Shortcut | Action |
|---|
| Cmd+C | Copy the selected element's JSX |
| Cmd+V | Paste after the selection if one exists, or spawn a new canvas element if nothing is selected |
| Delete / Backspace | Delete selected elements, the state's root included (deleting a state's only top-level element empties the frame); on a selected canvas element, removes the whole element |
| ↑ / ↓ | Swap with previous/next sibling in a vertical container |
| ← / → | Swap with previous/next sibling in a horizontal container |
| Cmd+G | Group the selected sibling elements into a container (a plain <div> by default, or the component you choose under Frame defaults → Grouping) |
| Cmd+Shift+G | Flex Group — wrap the selection in a flex container (an inline-flex <div> by default) |
| Cmd+Shift+U | Ungroup — lift a selected container's children back out and remove it |
| Shift + click | Add another element to the selection |
| Alt / Option + drag | Copy while dragging (instead of move) — works across frames, into canvas elements, and onto empty canvas |
| Double-click | Drill into a container; on a leaf, enter inline text edit |
State frames
| Shortcut | Action |
|---|
| Drag a frame's name | Move the frame. New frames auto-arrange; once you drag one it stays put where you left it |
| Drag on empty canvas | Marquee-select every frame the box touches |
| Shift / Cmd + click a frame name | Add or remove that frame from the selection |
| Drag any selected frame's name | Move the whole selection together |
| Esc while dragging | Cancel the move or marquee |
Zoom and pan
| Shortcut | Action |
|---|
| Cmd+= | Zoom in |
| Cmd+- | Zoom out |
| Cmd+0 | Reset zoom to 100 % |
| Cmd+1 | Zoom to fit all state frames |
| Cmd + scroll | Zoom at the cursor |
| Space + drag | Pan the canvas |
| Middle-click + drag | Pan the canvas |
| Trackpad pinch / two-finger scroll | Zoom / pan |
History
| Shortcut | Action |
|---|
| Cmd+Z | Undo |
| Cmd+Shift+Z | Redo |
Text edit and comments
| Shortcut | Action |
|---|
| T | Text tool — then click a frame to add text |
| Enter | Confirm inline text edit |
| Esc | Cancel inline edit, close comment thread, or exit comment placement mode |
| Cmd+Enter | Submit a comment |