Keyboard shortcuts
Every shortcut in Stacki, grouped by what it acts on.
Shortcuts are written for macOS. On Windows, ⌘ is Ctrl, ⌥ is Alt and ⇧ is Shift. The tables below say so themselves when you read them on a Windows machine.
Single-letter shortcuts are ignored while you are typing in a field, so a prop
value can still contain the letter s or the digit 2.
Panels
| Shortcut | Does |
|---|---|
| P | Pages |
| Z | Navigator |
| ⇧A | Components |
| J | Assets |
| ⌥C | CMS |
| S | Style tab |
| D | Settings tab |
Pressing the shortcut for the panel that is already open collapses it, which gives the canvas the whole window.
The rail’s tooltip offers ⌥V for Variables. In 0.1.8 that key is not wired up yet. Use the rail button.
Editing
| Shortcut | Does |
|---|---|
| ⌘E or ⌘F | Open the insert palette |
| ⌘Enter | Jump to the class field, with the caret in it |
| Enter | Open the selection’s code editor (frontmatter, <style>, <script>) |
| ⌘C | Copy the selected node |
| ⌘V | Paste it |
| ⌘D | Duplicate it |
| Delete / Backspace | Remove it |
| ⌘Z | Undo |
| ⇧⌘Z or ⌘Y | Redo |
Copy and paste fall back to normal text behaviour when a field has focus or text is selected.
Undo and redo are global: CSS edits, CMS edits and asset changes are on the same stack as page edits, and they work from anywhere in the app, including inside a field, so field edits and structural edits undo in the order you made them.
Canvas
| Shortcut | Does |
|---|---|
| 1 | Desktop |
| 2 | Tablet, 768px |
| 3 | Phone, 375px |
| 4 | Canvas, every breakpoint at once |
| Esc | Exit preview mode, or step out of a component you drilled into |
Navigator
| Shortcut | Does |
|---|---|
| ← / → | Previous / next sibling |
| ↑ | Parent |
| ↓ | First child |
Fields
| Shortcut | Does |
|---|---|
| ↑ / ↓ in a number field | Step by 1 |
| ⇧ + step | Step by 10 |
| ⌥ + step | Step by 0.1 |
| ⌥-click a spacing value | Remove it |
| ⇧-drag a spacing side | Change all four sides |
| ⌥-drag a spacing side | Change that side and its opposite |
| Enter | Commit and blur |
| Esc | Cancel and put the old value back |
Application menu
| Shortcut | Menu item |
|---|---|
| ⌘E | Edit → Insert Element… |
| ⌘Z / ⇧⌘Z | Edit → Undo / Redo |
| ⌘C / ⌘V | Edit → Copy / Paste |
On macOS the native menu takes these keys before the page sees them, so they are routed back into the editor, which is why they act on the selected node when no field has focus, and on the text when one does.