Web runtime
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
<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 for the current size.