Keyboard shortcuts
Site Designer follows the keyboard conventions of the platform it runs on, plus a handful of shortcuts specific to the canvas.
Confirmed in the CoffeeCup documentation
These are documented behaviours, not conventions.
| Action | macOS | Windows | Where it applies |
|---|---|---|---|
| Copy the selected element | ⌘C | Ctrl+C | Elements Tree and canvas |
| Paste onto the selected element | ⌘V | Ctrl+V | Elements Tree and canvas |
| Move the width slider by 1px | ← → | ← → | Click the slider handle first |
| Move a breakpoint by 1px | ← → | ← → | Select the breakpoint first |
The arrow-key trick is the one worth remembering: clicking a slider or breakpoint and then nudging it with the arrows is the only way to place it on an exact pixel. See the width slider.
Platform standards
Site Designer is a native desktop app, so the usual system shortcuts behave as you would expect.
| Action | macOS | Windows |
|---|---|---|
| New project | ⌘N | Ctrl+N |
| Open project | ⌘O | Ctrl+O |
| Save | ⌘S | Ctrl+S |
| Save As | ⌘⇧S | Ctrl+Shift+S |
| Close window | ⌘W | Ctrl+W |
| Quit | ⌘Q | Alt+F4 |
| Undo | ⌘Z | Ctrl+Z |
| Redo | ⌘⇧Z | Ctrl+Shift+Z |
| Cut | ⌘X | Ctrl+X |
| Select all | ⌘A | Ctrl+A |
When the inline text editor is open, the usual text shortcuts apply to the selection: ⌘B for bold, ⌘I for italic, ⌘U for underline.
Finding the rest
Site Designer prints its own shortcuts next to the commands that have them. Two places to look:
- The application menus. Open the File, Edit and View menus; any command with a shortcut shows it on the right of the menu item. This is the authoritative list for the version you are running.
- The right-click menu on the canvas. Element actions such as duplicate, delete and edit text appear here with their shortcut when one exists.
Mouse and trackpad
| Action | How |
|---|---|
| Select an element | Click it on the canvas |
| Select a nested element | Click again on the same spot to go one level deeper |
| Select a parent | Use the breadcrumb bar at the bottom of the canvas, or the hover bar’s parent dropdown |
| Open the inline text editor | Double-click a text element |
| Open the context menu | Right-click any element |
| Jump to an element’s styles | Double-click it on the canvas or in the Elements Tree |
More on each of these in selecting elements and the indicator hover bar.