The document format
An Envy document is one JSON file (*.envy.json). Both runtimes read it as is. Missing fields are filled with defaults on load, so hand-written documents stay short. The JSON Schema is available from envy schema.
{
"format": "envy-ui", "version": 2, "id": "d_…", "name": "My game UI",
"description": "What this UI is for, read by implementers and AI agents",
"tokens": { "colors": { "accent": "#f2c14e" } },
"textStyles": { "H1": { "font": "Rajdhani", "size": 56, "weight": 700, "lineHeight": 1.05, "letterSpacing": 6, "uppercase": true } },
"assets": { "img_…": { "name": "…", "src": "data:image/png;base64,…", "width": 512, "height": 512 } },
"screens": [ { "id": "…", "name": "Main Menu", "root": "<node id>", "width": 1920, "height": 1080 } ],
"components": [ { "id": "…", "name": "Button / Primary", "root": "<node id>", "set": "…", "variant": { "Style": "Primary" } } ],
"componentSets": [ { "id": "…", "name": "Button", "props": [ { "name": "Style", "values": ["Primary", "Danger"] } ] } ],
"nodes": { "<id>": { } },
"animations": [ ],
"sampleData": { "player": { "hp": 72 } },
"scenarios": [ { "id": "…", "name": "Low health", "data": { "player": { "hp": 5 } } } ],
"i18n": { "base": "en", "tables": { "de": { "menu.play": "Spielen" } } }
}
Boards and nodes
Screens and components are both boards: a root node with no parent. Nodes live in one flat map and form a tree through parent and children; children order is paint order.
Node types: frame, button, text, image, progress, shape, instance. Frames and buttons have children; instances get theirs from their component. Any node can carry notes.
| Field | See |
|---|---|
layout (anchors, offsets, width, height, sizing, rotation) |
Layout |
container (mode, gap, padding, align, justify, wrap) |
Layout |
style, text, image, progress, shape |
Style |
instance (component, overrides, values) |
Components |
states, events.click |
Components, Data and events |
bindings, list |
Data and events |
focus |
Focus |
text.key |
Localization |
Colors
A color is #rrggbb, #rrggbbaa or a token reference like $accent.
Animations
{ "id": "…", "name": "Intro", "screen": "<screen id>", "duration": 1.4, "loop": false, "autoplay": true,
"tracks": [ { "id": "…", "node": "<node id>", "prop": "opacity", "keys": [ { "t": 0, "v": 0, "ease": "out" }, { "t": 0.5, "v": 1, "ease": "linear" } ] } ] }
See Animation.
Versions
The format has a version number, and older documents load through a migration step (normalizeDoc). Documents from version 1 and the older strata-ui id load unchanged.