# The editor

> The three panes of the editor, the bar above them, and how the layout changes on a narrow screen.

Choose a resume in the library and the editor opens on it. It has three panes
side by side:

- **Code** on the left holds the Markdown and your own CSS.
- **Paper** in the middle is the page, as it will print.
- **Style** on the right holds the controls for how it looks.

Drag the handles between panes to resize them. The widths are remembered, and
no pane can be dragged down to nothing, so one can always be dragged back.

## On a narrow screen

Three panes need room. On a screen narrower than 1200 pixels the editor shows
one pane at a time, chosen from a tab strip along the top with **Code**,
**Paper** and **Style** on it. **Paper** is the one it opens on. Nothing is
removed on a small screen: the same three panes are there, one at a time.

Switching tabs lays the paper out again at the width it is drawn, so the pages
are re-measured each time you return to **Paper**.

## The bar above the editor

- The resume's name is a field at the left of the bar. Click it to rename the
  resume. Press Enter, or click away, to keep the new name, and press Escape to
  discard it. A name cannot be left empty.
- The save indicator says whether your last change is on the device. See
  [Autosave and undo](https://shopsalone.com/en/docs/editor/autosave-and-undo.md).
- The undo and redo buttons step back and forward through your changes.
- **Export** is covered in the quick start, and its formats are listed in the
  menu itself.

## The three panes in turn

- **Code** has two tabs, one for the Markdown and one for the CSS. See
  [Markdown and CSS panes](https://shopsalone.com/en/docs/editor/markdown-and-css-panes.md).
- **Paper** shows the page and, in Visual mode, lets you edit on it. See
  [Visual editing](https://shopsalone.com/en/docs/editor/visual-editing.md) and
  [Pages and breaks](https://shopsalone.com/en/docs/editor/pages-and-breaks.md).
- **Style** is an inspector with the tabs **Style**, **Sections**, **Assets**
  and **ATS**.

Every pane edits the same document. A word you change in **Code** changes on
**Paper**, and a section you move on **Paper** moves in the Markdown.

## Keyboard

Most things have a shortcut, and the command palette reaches the rest. See
[Shortcuts and the command palette](https://shopsalone.com/en/docs/editor/shortcuts-and-palette.md).