# Web runtime

> Run Envy game UI in any web page or web game with one dependency-free script. Mount a document, set data, listen to events, run overlays and switch language.

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

The web runtime is one script with no dependencies. It renders a document to plain DOM elements and runs it: states, data, events, animation, transitions, overlays, focus and translations. The editor's canvas uses the same renderer.

## Install

```html
<div id="ui" style="position: fixed; inset: 0"></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, { screen: "Main Menu" });
  ui.on("start_game", () => game.start());
  ui.setData("player.hp", 40);
</script>
```

`envy-runtime.js` defines a global `Envy`. It comes with every web and AI handoff export. In a bundled game, the generated TypeScript wrapper (`web/<name>-ui.ts`) gives you typed events, screens and data paths.

## Options

| Option | Default | Meaning |
|---|---|---|
| `screen` | First screen | Screen to show first, by name or id |
| `data` | Sample data | Initial data |
| `locale` | Base text | Locale for translated text, or `"pseudo"` |
| `scaleMode` | `"fit"` | Scale the design resolution into the element, or `"none"` |
| `autoplay` | `true` | Play autoplay animations when a screen shows |
| `gamepad` | `true` | Gamepad navigation |
| `respectReducedMotion` | `true` | Skip screen transitions for reduced motion |
| `onEvent`, `onScreenChange`, `onDataChange` | | Callbacks |

## The player

| Member | Does |
|---|---|
| `goto(screen, { transition })` | Shows a screen |
| `push(screen)`, `pop()`, `stack` | Overlays |
| `setData(path, value)`, `setData(patch)`, `getData(path)` | Data |
| `play(anim)`, `stop(anim)`, `isPlaying(anim)` | Animations |
| `setLocale(locale)`, `locales`, `locale` | Language |
| `on(event, fn)`, `off(event, fn)`, `emit(event, payload)` | Events (`"*"` listens to all) |
| `layout()`, `destroy()` | Rescale after a resize you manage, unmount |

## Security

The runtime treats a document as data. Colors are validated, stroke markup is built with DOM calls instead of HTML strings, and embedded fonts load only from `data:` URLs or same-origin paths, so a document can't make the page fetch fonts from other origins.

## Size

The runtime is small enough to ship with a menu: see the [runtimes page](/runtimes) for the current size.