Appearance
Inline editing & shortcuts
The fastest way to change text is to click it and type — no side panel needed. This page covers inline editing (including rich text on headings and paragraphs) and the keyboard shortcuts that make building a page quick.
Click to edit
When a node is selected, its text becomes editable in place. Click a heading, paragraph, button label, or link and start typing; click away (or press Esc to cancel) to finish. You can also trigger editing on the selected node from the keyboard with ⌘Enter, without reaching for the mouse.
There are two editing styles depending on the component:
- Rich text on Typography and Alert — full formatting.
- Plain text on Button and Link — a single style, because rich formatting would clash with the surrounding component.
Rich text on Typography
Text components edit through a proper rich-text editor. When you're editing, a small floating toolbar appears above the text with:
| Control | Shortcut |
|---|---|
| Bold | ⌘B |
| Italic | ⌘I |
| Underline | ⌘U |
| Link | toolbar button (prompts for a URL) |
| Bulleted list | toolbar button |
| Numbered list | toolbar button |
| Clear formatting | toolbar button |
Formatting is stored as HTML on the node and rendered identically in the editor, in preview, and on the public page — so what you style is exactly what visitors see. All rich content is sanitized on every render and export, so pasted markup can't introduce anything unsafe.
INFO
📸 Screenshot — a Typography heading in edit mode with the floating bold/italic/link toolbar above it.
Keyboard shortcuts
Press ⌘/ at any time to open the shortcuts dialog. The full set:
Selection
| Action | Keys |
|---|---|
| Previous / next element | ↑ ↓ |
| Go to parent | ← |
| Enter first child | → |
| Clear selection | Esc |
Editing
| Action | Keys |
|---|---|
| Edit text inline | ⌘Enter |
| Add to multi-selection | ⌘Click |
| Mark all siblings | ⌘A |
| Group marked into a Stack | ⌘G |
| Duplicate (works on a multi-selection) | ⌘D |
| Copy | ⌘C |
| Paste | ⌘V |
| Remove (works on a multi-selection) | Delete |
History
| Action | Keys |
|---|---|
| Undo | ⌘Z |
| Redo | ⌘⇧Z |
| Save now (flush) | ⌘S |
Help
| Action | Keys |
|---|---|
| Show the shortcuts dialog | ⌘/ |
TIP
On Windows and Linux, use Ctrl wherever these show ⌘ — the dialog shows the right modifier for your platform automatically.
A fast editing loop
Put the shortcuts together and you rarely touch a menu:
- ↑ / ↓ to walk through elements, ← / → to move up and down the tree.
- ⌘Enter to edit the selected text, type, Esc to finish.
- ⌘Click a few siblings, then ⌘G to wrap them in a Stack or ⌘D to duplicate them.
- ⌘Z / ⌘⇧Z to step through history, ⌘S to flush a save before you close the tab.
The outline mirrors your selection the whole time, so you always know where you are in the tree.