Keyboard shortcuts in the TeleportHQ editor
The TeleportHQ editor has keyboard shortcuts for editing, selecting, adding elements, zooming, finding text and opening panels. On Windows, use Ctrl and Alt; on a Mac, use Cmd (⌘) and Option (⌥). To see a shortcut sheet inside the editor, press Ctrl+Shift+/ (Cmd+Shift+/ on a Mac), or open Project Menu → Help → Keyboard Shortcuts.
How TeleportHQ shortcuts work
- Focus matters. Most shortcuts work when the canvas or the layers tree is active. Click an empty part of the canvas first. While you're typing in a text element or a settings field, the keys type text instead.
- Mac and Windows. Every "Ctrl" shortcut below uses Cmd on a Mac, and every "Alt" uses Option.
- The in-app sheet. The Keyboard Shortcuts sheet slides up from the bottom of the editor, with the tabs Control, View, Elements and Others. Besides Ctrl+Shift+/ and the Help menu, you can open it from the Keyboard shortcuts icon at the bottom of the Project settings panel (click the cog at the bottom of the left sidebar). Close it with the × at its top right.
- What this list covers. This article lists the shortcuts that work in the editor today, including some that aren't on the sheet. A few lines on the sheet don't do anything at the moment: Toggle highlight parent, Toggle code view, Toggle breakpoint indicators and Toggle CSS Classes (Ctrl+3). Ctrl+Shift+P opens the command palette.
- No save shortcut needed. TeleportHQ saves your work automatically, so Ctrl+S does nothing.
Editing
| Action | Windows | Mac |
|---|---|---|
| Copy | Ctrl+C | ⌘C |
| Cut | Ctrl+X | ⌘X |
| Paste | Ctrl+V | ⌘V |
| Paste style (copy the look of the copied element) | Ctrl+Alt+V | ⌘⌥V |
| Duplicate | Ctrl+D | ⌘D |
| Group selected elements into a container | Ctrl+G | ⌘G |
| Ungroup | Ctrl+Shift+G | ⌘⇧G |
| Delete | Delete or Backspace | ⌫ |
| Add or edit a link | Ctrl+K | ⌘K |
| Start editing the selected element (for example, its text) | E | E |
| Move the element before or after its neighbor | Arrow keys | Arrow keys |
| Move or resize a freely placed element without snapping to guides | Hold Ctrl while you drag | Hold ⌘ while you drag |
Arrow keys move the element left or right in a row, and up or down in a column. See How to copy, paste and duplicate elements.
Text
These work while you're editing text on the canvas:
| Action | Windows | Mac |
|---|---|---|
| Bold | Ctrl+B | ⌘B |
| Italic | Ctrl+I | ⌘I |
| Underline | Ctrl+U | ⌘U |
Selecting
| Action | Windows | Mac |
|---|---|---|
| Select the parent element | Esc | Esc |
| Clear a selection of several elements | Esc | Esc |
| Select the first element inside (or start editing) | Enter | Return |
| Select the next element at the same level | Tab | Tab |
| Select the previous element at the same level | Shift+Tab | ⇧Tab |
| Select all elements at the same level | Ctrl+A | ⌘A |
| Add or remove an element from the selection | Ctrl+click | ⌘-click |
| Select a range of elements next to each other | Shift+click | ⇧-click |
| Open the next page (or component) | Ctrl+↓ | ⌘↓ |
| Open the previous page (or component) | Ctrl+↑ | ⌘↑ |
Esc also cancels a drag in progress. See How to select one or several elements.
History
| Action | Windows | Mac |
|---|---|---|
| Undo | Ctrl+Z | ⌘Z |
| Redo | Ctrl+Shift+Z | ⌘⇧Z |
See How to undo and redo changes.
Adding elements
Select a container on the canvas, then press a letter. The element is added inside the selected element. These keys don't work inside a component copy (instance) on a page.
| Key | Adds |
|---|---|
| R | Row |
| C | Column |
| T | Text |
| H | Heading |
| L or K | Link |
| B | Button |
| I | Image |
| V | Video |
| D | Date |
| S | Slot (only while editing a component) |
Zoom and view
| Action | Windows | Mac |
|---|---|---|
| Zoom in | Ctrl + + | ⌘ + + |
| Zoom out | Ctrl + − | ⌘ + − |
| Zoom to 100% | Ctrl+0 | ⌘0 |
| Zoom smoothly | Ctrl + scroll | ⌘ + scroll, or pinch |
| Move around the canvas | Hold Space and drag | Hold Space and drag |
| Scroll sideways | Shift + scroll | ⇧ + scroll |
| Show or hide margin and padding highlights | Ctrl+Shift+H | ⌘⇧H |
| Turn Grayscale Structure Mode on or off | Ctrl+Shift+S | ⌘⇧S |
| Switch the right panel between Visual and Advanced | Ctrl+Shift+I | ⌘⇧I |
See How to zoom and move around the canvas and How to see your page structure.
Panels
| Action | Windows | Mac |
|---|---|---|
| Open or close Elements | Ctrl+1 | ⌘1 |
| Open or close Pages, Components & Tree View | Ctrl+2 | ⌘2 |
| Open or close Assets Manager | Ctrl+4 | ⌘4 |
| Open Growth on Forms (your forms and their submissions) | Ctrl+5 | ⌘5 |
| Move a focused left sidebar icon up or down | Alt+↑ / Alt+↓ | ⌥↑ / ⌥↓ |
See How to reorder the tabs in the left sidebar.
Pages and components list
These work when a page or component is selected in the Pages, Components & Tree View panel:
| Action | Windows | Mac |
|---|---|---|
| Rename | F2 | F2 |
| Duplicate | Ctrl+D | ⌘D |
| Delete | Delete or Backspace | ⌫ |
| Copy a component (for example, to paste into another project) | Ctrl+C | ⌘C |
| Paste copied content into the selected page or component | Ctrl+V | ⌘V |
| Create a new component | Ctrl+Alt+K | ⌘⌥K |
Other
| Action | Windows | Mac |
|---|---|---|
| Find and replace text on every page | Ctrl+Alt+F | ⌘⌥F |
| Open the command palette | Ctrl+P | ⌘P |
| Open the command palette with commands | Ctrl+Shift+P (Firefox: Ctrl+Alt+P) | ⌘⇧P (Firefox: ⌘⌥P) |
| Open the Keyboard Shortcuts sheet | Ctrl+Shift+/ | ⌘⇧/ |
| Duplicate while dragging | Hold Alt while you drop | Hold ⌥ while you drop |
Ctrl+F (⌘F on a Mac) is left to your browser's own find in page. On a Windows keyboard where Ctrl+Alt+F types a character (for example, a Hungarian or Czech layout), the keys type that character instead: open Find and replace text from the command palette. See How to use the command palette.