# The editor

The project editor at a glance, from the Parts sidebar and 3D view to the details sidebar, toolbar, status bar, shortcuts and tour.

Source: https://rack-maker.cbnsndwch.dev/docs/editor

## What the editor is

Every project opens in the editor, at `/p/` followed by the project's id. It shows one rack and what's in it, and everything about it updates as you edit: the 3D view, the front elevation, the checks, the bill of materials and the printed parts.

The fastest way to learn it is the editor tour. It takes about a minute and points at each area in turn.

You can start the tour from any open project: press **?** at the right end of the toolbar. It also opens by itself when you open a project, until you finish it or close it once in that browser. Adding `#tour` to the end of a project's link starts it too.

## The layout

The editor has five areas:

| Area              | Where                  | What it holds                                                                                                    |
| ----------------- | ---------------------- | ---------------------------------------------------------------------------------------------------------------- |
| **Parts** sidebar | left                   | The parts you can add, in groups, with a search box. See [Placing parts](https://rack-maker.cbnsndwch.dev/docs/editor/placing-parts).            |
| Toolbar           | top, above the 3D view | The project's name and id, undo and redo, sharing, **Duplicate**, **Export**, **All projects** and **?**.        |
| 3D view           | centre                 | The rack in 3D. Orbit, zoom, select, and drag parts in or around.                                                |
| Details sidebar   | right                  | The cards: the summary row, **Inspector**, **Front elevation**, checks, BOM, printed parts, history and credits. |
| Status bar        | bottom                 | Sync state, the project, the selection, part count, checks and the total.                                        |

On a phone or a narrow window the areas stack and the page scrolls instead: the 3D view first, then Parts, then the cards.

![The editor: the Parts sidebar on the left, the toolbar and the 3D view in the middle, the details sidebar on the right and the status bar along the bottom](https://rack-maker.cbnsndwch.dev/docs/shots/editor/overview-light.webp)

*The five areas: Parts, the toolbar, the 3D view, the details sidebar and the status bar.*

### Sidebars

The two buttons at each end of the toolbar show and hide the sidebars. The keyboard does the same: **Ctrl+B** toggles the Parts sidebar and **Ctrl+Alt+B** the details sidebar (use **Cmd** on a Mac). To resize a sidebar, drag its inner edge, or focus the edge and use the arrow keys.

Each card in the details sidebar folds away when you click its title. Your browser remembers which sidebars are open, how wide they are and which cards are folded.

### The cards in the details sidebar

From top to bottom:

- **The summary row.** The rack's key figures, such as its hole pitch on a RackMate TL1, then the filament the printed parts need (in kg, an upper bound that assumes solid prints), then the figures other parts report. The last cell is **Checks**. It says "clear to print" when everything passes and "fix before printing" when something fails.
- **Updates available.** Shows up only when a part in the project has a newer published revision in the catalog. **Preview** lists what would change and **Upgrade** applies it. With more than one update, **Upgrade all** applies them all. See [Entries and revisions](https://rack-maker.cbnsndwch.dev/docs/catalog/entries-and-revisions).
- **Inspector.** The selected part. See [The inspector](https://rack-maker.cbnsndwch.dev/docs/editor/inspector).
- **Front elevation.** The rack's rails from the front. See [Placing parts](https://rack-maker.cbnsndwch.dev/docs/editor/placing-parts#the-front-elevation).
- **Clearance checks** and **Problems.** See [Checks and problems](https://rack-maker.cbnsndwch.dev/docs/editor/checks).
- **Rack layout.** Every mount on the rails as a row you can edit. See [Placing parts](https://rack-maker.cbnsndwch.dev/docs/editor/placing-parts#the-rack-layout-card).
- **Measurements.** The values you can measure on your own hardware. See [The inspector](https://rack-maker.cbnsndwch.dev/docs/editor/inspector#measurements).
- **BOM & quote.** What to buy and what it costs. See [BOM & quote](https://rack-maker.cbnsndwch.dev/docs/editor/bom-and-quote).
- **Printed parts.** The STL files to print. See [Exports and printing](https://rack-maker.cbnsndwch.dev/docs/editor/exports-and-printing).
- **rackparams.json.** The project as JSON. See [Exports and printing](https://rack-maker.cbnsndwch.dev/docs/editor/exports-and-printing#the-rackparamsjson-card).
- **History.** Saved revisions, snapshots and restore. See [Sharing and history](https://rack-maker.cbnsndwch.dev/docs/editor/sharing#history).
- **Credits.** Whose work the project uses, with a link to all [credits](https://rack-maker.cbnsndwch.dev/credits). See [Licences and credits](https://rack-maker.cbnsndwch.dev/docs/catalog/licences-and-credits).

## The toolbar

From left to right:

- **Project name.** Click it to rename the project. **Enter** saves, **Esc** cancels. Names can be up to 80 characters.
- **Project id.** The 21-character id. It's all anyone needs to open and edit the project, so treat it like a password. On narrow windows it's hidden.
- **Undo** and **Redo.**
- **Claim** or **Read-only link.** Only shown when you're signed in. See [Sharing and history](https://rack-maker.cbnsndwch.dev/docs/editor/sharing).
- **Copy link.** Copies the project's link. Anyone with it can open and edit the project.
- **Duplicate.** Makes a copy of the project under your account and opens it. You need to be signed in.
- **Export.** Saves the project as a file. See [Exports and printing](https://rack-maker.cbnsndwch.dev/docs/editor/exports-and-printing#the-project-file).
- **All projects.** Goes back to the project list.
- **?** Starts the editor tour.

![The editor's toolbar: the sidebar button, the project's name and id, undo and redo, Read-only link, Copy link, Duplicate, Export, All projects, ? and the other sidebar button](https://rack-maker.cbnsndwch.dev/docs/shots/editor/toolbar-light.webp)

*The toolbar on a wide window, where the buttons show their names.*

On narrower windows the buttons show only their icons.

## The status bar

The bar along the bottom shows:

- the sync state: **connecting…**, **synced**, **saving…**, **saved**, **offline**, **newer values loaded** or **save failed** (see [Sharing and history](https://rack-maker.cbnsndwch.dev/docs/editor/sharing#saving-and-sync))
- the project's name and id
- what's selected, or "nothing selected"
- how many parts are in the project and how much of the rails is in use
- the checks: "checks pass", or how many are failing and how many problems there are. Click it to jump to the checks.
- the quote's total, one amount per currency. Click it to jump to **BOM & quote**.
- your handle, when you're signed in

![The status bar: synced, Homelab rack and its id, nothing selected, 25 parts and 8.33 of 10 U, 2 failing, 17.41 USD and @ana](https://rack-maker.cbnsndwch.dev/docs/shots/editor/status-bar-light.webp)

*The status bar. Click the checks or the total to jump to their cards.*

## Keyboard shortcuts

These work while a project is open, as long as you aren't typing in a field.

| Key                            | What it does                                                                |
| ------------------------------ | --------------------------------------------------------------------------- |
| **Ctrl+Z**                     | Undo                                                                        |
| **Ctrl+Shift+Z** or **Ctrl+Y** | Redo                                                                        |
| **Delete** or **Backspace**    | Remove the selected part                                                    |
| **Ctrl+D**                     | Duplicate the selected part                                                 |
| Arrow keys                     | Nudge the selected part: one position up or down on rails, 5 mm on a deck   |
| **Esc**                        | Cancel a drag, then disarm a part picked in Parts, then clear the selection |
| **Ctrl+B** / **Ctrl+Alt+B**    | Show or hide the Parts sidebar / the details sidebar                        |
| **Space** (held)               | Pan the 3D view while you drag                                              |

On a Mac, use **Cmd** instead of **Ctrl**.

Undo covers the edits you made in this browser tab. To go back further, or to undo someone else's change, use [History](https://rack-maker.cbnsndwch.dev/docs/editor/sharing#history).

## If the 3D view doesn't start

The 3D view needs WebGL. If your browser has it turned off, the view says "The 3D view could not start" and offers **Try again**. Everything else still works: you can place and edit parts from Parts, the elevation, the **Rack layout** card and the inspector.

## Next

- [Placing parts](https://rack-maker.cbnsndwch.dev/docs/editor/placing-parts): The Parts palette, the 3D view and the elevation.
- [The inspector](https://rack-maker.cbnsndwch.dev/docs/editor/inspector): Change the selected part: values, placement, replace.
- [Checks and problems](https://rack-maker.cbnsndwch.dev/docs/editor/checks): What's verified, and how to fix what fails.
- [BOM & quote](https://rack-maker.cbnsndwch.dev/docs/editor/bom-and-quote): What to buy, where, and what it costs.
- [Exports and printing](https://rack-maker.cbnsndwch.dev/docs/editor/exports-and-printing): Project files, CSV and STL files for printed parts.
- [Sharing and history](https://rack-maker.cbnsndwch.dev/docs/editor/sharing): Project links, read-only links, revisions and sync.