Runtime UI themes
The runtime tier is the most flexible Workshop theme: ship content/ui/ and talk to the host over a postMessage bridge. Colors/CSS basics → theme tutorial.
No Node, no undeclared network, no bypassing Audio Core. The host keeps emergency exit chrome and capability checks.
When to choose runtime
Section titled “When to choose runtime”| Need | Tier |
|---|---|
| Colors only | colors |
| Declarative chrome | skin |
| Packaged CSS | stylesheet |
| Full custom navigation/UI | runtime |
node .\bin\echo-workshop-sdk.mjs init .\my-ui --recipe custom-uinode .\bin\echo-workshop-sdk.mjs scaffold .\my-theme --preset runtimeminEchoVersion ≥ 26.8.20.
Layout
Section titled “Layout”content/ui/index.html, app.css, app.js.echo-sdk/echo-workshop-ui-runtime.d.tsBridge model
Section titled “Bridge model”- Your UI runs in a sandboxed iframe.
- Request library/playback/queue via postMessage; host checks capabilities.
- Results return sanitized — no raw paths or undeclared network.
node .\bin\echo-workshop-sdk.mjs snippet ui-runtime-initnpm run add -- --capability playback:controlReference project
Section titled “Reference project”examples/retro-modern-ui-runtime/ — library browse, shuffle/repeat, lyrics line, spectrum.
node .\bin\echo-workshop-sdk.mjs example retro-modern-ui-runtime .\retro-uinpm run devDev loop
Section titled “Dev loop”Edit content/ui/* → npm run watch or check → dev for console + fixture preview.
- Keep host emergency exit chrome.
- Sanitation blocks inline injection and remote
@importlike stylesheet themes. - Runtime theme replaces main UI; sandbox plug-in panels are a separate kind.