# The editor

> How Envy's game UI editor is laid out, the tools on the canvas, previewing, saving and the keyboard shortcuts you'll use every day.

Source: https://envyui.com/docs/editor

The editor is a web app. The canvas in the middle is the web runtime in design mode, so what you see while you edit is what ships.

## Layout

- **Layers** on the left: every screen and component board, and the layer tree of the one you're in, with a search box.
- **Canvas** in the middle: screens and component boards side by side. Pan with Space or the hand tool, zoom with Ctrl + scroll.
- **Inspector** on the right: layout, style, text, interaction, bindings, focus and notes for the selection.
- **Timeline** at the bottom (**Alt T**): keyframe animation for the current screen.

Hide panels to get room: **Ctrl \\** hides both, **Ctrl Alt \\** the left one, **Ctrl Shift \\** the right one. Drag a panel's edge to resize it.

## Selecting

Click selects the top-level layer under the pointer, double-click goes one level deeper, and Ctrl-click picks the deepest layer. Drag on empty canvas to marquee-select. Arrow keys nudge by 1 px, Shift with an arrow by 10.

## Tools

| Key | Tool |
|---|---|
| V | Select |
| H | Hand (pan) |
| F | Frame |
| R | Rectangle |
| O | Ellipse |
| L | Line |
| N | Pen (vector paths) |
| T | Text |
| B | Button |
| I | Image |
| P | Progress bar |

## Everyday shortcuts

| Keys | Action |
|---|---|
| Ctrl S / Ctrl O | Save to file / open a file |
| Ctrl E | Export |
| Ctrl Enter | Preview |
| Ctrl Z / Ctrl Shift Z | Undo / redo |
| Ctrl D | Duplicate |
| Ctrl G / Ctrl Shift G | Wrap in a frame / unwrap |
| Shift A | Auto layout on or off (wraps a multi-selection in a row) |
| Ctrl Alt K | Create a component from the selection |
| Ctrl Alt B | Detach an instance |
| Ctrl Alt C / Ctrl Alt V | Copy / paste properties |
| Ctrl ] / Ctrl [ | Bring forward / send backward (Shift for front and back) |
| Ctrl Shift H / Ctrl Shift L | Hide / lock |
| Ctrl A | Select all layers next to the selection |
| Shift R | Rulers |
| Ctrl ; / Ctrl ' | Guides / layout grids |
| Shift 1 / Shift 2 | Zoom to fit / zoom to selection |
| Ctrl 0 | Zoom to 100% |
| Alt T | Timeline |
| ? | All shortcuts |

Hold **Alt** over a layer to measure the distance to the selection.

## Saving

The editor autosaves every document in your browser and shows whether the last save worked. To keep a file in your game's repository, link the document to a `.envy.json` file: after that, **Ctrl S** writes straight to it, and Godot picks up the change while the game runs (see [Godot runtime](/docs/godot)).

## Checks

**Document checks** list problems before you export: missing tokens, screens, assets or focus targets, data paths without a sample value, untranslated keys and more. The same checks run in the CLI as `envy validate`.

> The site shows the editor's next design (v2), which is in development. Today's editor has the same canvas, runtime and features in a simpler layout.