# Quick start

> Make your first game UI screen in Envy (alpha), preview it, and run it in Godot 4 or a web page. Takes about ten minutes.

Source: https://envyui.com/docs/quick-start

Envy is a game UI editor. You draw screens on a canvas, and the same file runs natively in Godot 4 and in the browser. This page takes you from an empty project to a menu running in your game.

## 1. Open the editor

Envy is in alpha: [join the waitlist](/waitlist) for access. The editor runs in a desktop browser with no install. Your work is saved in the browser as you go, and **Ctrl S** saves it to a `.envy.json` file on disk.

Choose **New project**. You can start blank, from the [starter kit](/kit) (15 screens on one token set), or from a showcase project like [The Last Hunt](/showcase).

## 2. Draw a screen

- Press **F** for a frame, **T** for text, **B** for a button. **V** goes back to select.
- Select a few layers and press **Shift A** to put them in an auto-layout row or column. In Godot they become box containers.
- Pin layers to edges with the anchor widget in the inspector, so the screen holds at other aspect ratios. See [Layout](/docs/layout).
- Select a layer and press **Ctrl Alt K** to turn it into a component. Copies stay in step with it. See [Components](/docs/components).

## 3. Make it do something

- On a button, add a click action: **Emit event** `start_game`, **Go to screen**, **Push** an overlay, **Set** or **Toggle** data, or **Play** an animation.
- Bind a text or progress layer to a data path like `player.hp`, or write `HP {player.hp}` in a text layer.
- Give the document sample data so the canvas looks alive. See [Data and events](/docs/data).

Press **Ctrl Enter** to preview. Buttons, transitions and animations run for real.

## 4. Run it in your game

Press **Ctrl E** to export.

**Godot 4.3+**: export the **Godot package**, copy `addons/envy_ui` into your project, enable the plugin and add an `EnvyUI` node:

```gdscript
var ui := EnvyUI.new()
ui.document_path = "res://ui/my_ui.envy.json"
add_child(ui)
ui.ui_event.connect(func(event, payload):
	if event == "start_game": start_game())
ui.set_data("player.hp", 72)
```

**Web**: load the runtime and mount the document into any element:

```html
<div id="ui" style="width: 100vw; height: 100vh"></div>
<script src="envy-runtime.js"></script>
<script type="module">
  const doc = await fetch("ui/my_ui.envy.json").then((r) => r.json());
  const ui = Envy.mount(document.getElementById("ui"), doc);
  ui.on("start_game", () => game.start());
  ui.setData("player.hp", 72);
</script>
```

## 5. Hand it off

Export **AI handoff** to get a zip a programmer or a coding agent can work from: AGENTS.md, the event and data contract, screenshots and typed code for Godot and TypeScript. See [Handoff](/docs/handoff).

## Next

- [The editor](/docs/editor): canvas, panels and shortcuts.
- [Godot runtime](/docs/godot) and [web runtime](/docs/web).
- [The document format](/docs/format), if you want to read or write `.envy.json` by hand.