The 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).
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.