DocsStart

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 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 (15 screens on one token set), or from a showcase project like The Last Hunt.

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.
  • Select a layer and press Ctrl Alt K to turn it into a component. Copies stay in step with it. See 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.

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:

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:

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

Next

Updated View as Markdown