# Using the editor

The editor's rail and panels, the Design panel's tabs, Help, and the keyboard shortcuts.

The editor opens with the page on the canvas, the inspector on the right for the
selected block, and a rail of named panels on the left. One panel is open at a time.
Choosing a panel's item again closes it and gives the canvas the room back.

## The rail

The rail shows only the panels that work in this editor. A panel that is not built yet
has no item at all, so nothing on the rail opens an empty panel.

| Item         | What it holds                                                                                                                                                                             |
| ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Add**      | The blocks, components and saved patterns you can place. Drag one onto the canvas, or choose it to place it after the selected block, or at the end of the page when nothing is selected. |
| **Layers**   | The page as a tree. Select, expand and move blocks here as on the canvas.                                                                                                                 |
| **Design**   | The site's look, in three tabs: **Variables** (the design tokens), **Classes** and **Fonts**.                                                                                             |
| **Settings** | The entry's other fields, such as its title, slug and SEO. It appears only when the entry has fields besides the page itself.                                                             |
| **Help**     | The keyboard shortcuts in effect, and links to these pages.                                                                                                                               |

Add, Layers and Design sit at the top. Settings and Help sit at the bottom.

The editor remembers the panel you left open, and on Design the tab you left on, the
next time you open it in the same browser.

## Help

Help lists the keyboard shortcuts the editor has right now, read from the same list the
keyboard uses. So a key shows there only if pressing it does what Help says. When the
editor and the page around it both bind a key, Help shows the binding that runs inside
the editor.

Escape closes Help and returns you to the rail.

## Keyboard shortcuts

On a Mac, <kbd>⌘</kbd> replaces <kbd>Ctrl</kbd>.

| Keys                                                                          | What they do                                                                                                                      |
| ----------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| <kbd>Ctrl</kbd>+<kbd>Z</kbd>                                                  | Undo the last change                                                                                                              |
| <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd> or <kbd>Ctrl</kbd>+<kbd>Y</kbd> | Redo the last undone change                                                                                                       |
| <kbd>Ctrl</kbd>+<kbd>D</kbd>                                                  | Duplicate the selected block                                                                                                      |
| <kbd>Delete</kbd> or <kbd>Backspace</kbd>                                     | Delete the selected block                                                                                                         |
| <kbd>Enter</kbd>                                                              | Edit the selected block's text                                                                                                    |
| <kbd>Escape</kbd>                                                             | Clear the block selection                                                                                                         |
| <kbd>Alt</kbd>+<kbd>↑</kbd> / <kbd>Alt</kbd>+<kbd>↓</kbd>                     | Move the selected block up or down                                                                                                |
| <kbd>Alt</kbd>+<kbd>→</kbd> / <kbd>Alt</kbd>+<kbd>←</kbd>                     | Move the selected block into the container above it, or out of its container                                                      |
| <kbd>Ctrl</kbd>+<kbd>K</kbd>                                                  | Open the command palette                                                                                                          |
| <kbd>F6</kbd>                                                                 | Move to the next area of the editor: rail, panel, canvas, inspector                                                               |
| <kbd>Ctrl</kbd>+<kbd>0</kbd>                                                  | Show the page at actual size                                                                                                      |
| <kbd>Shift</kbd>+<kbd>1</kbd>                                                 | Fit the page to the canvas                                                                                                        |
| <kbd>Shift</kbd>+<kbd>F10</kbd> or the menu key                               | Open the menu of the block that holds focus, from a link or button inside it. Elsewhere, right-click the block or use its toolbar |

Help is the complete list for the editor you have open, including any shortcut the
page around it adds, such as saving.

## Related

* [Page Builder](https://nextlyhq.com/docs/page-builder.md) — install the plugin and render its pages
* [Locked areas](https://nextlyhq.com/docs/page-builder/locked-areas.md) — keep a section's structure while authors edit it
