A self-hosted HTML graphics engine and web control UI for broadcast-style overlays. Built with Nuxt 4, Vue 3, and GSAP.
Outputs transparent HTML overlays for OBS Browser Source. Operator UI controls what's on air. Producer UI manages the content. WebSocket keeps everything in sync.
pnpm install
pnpm devOpen http://localhost:3000, create a workspace, and start building graphics.
| URL | What it does |
|---|---|
/app |
Workspace dashboard |
/app/:id/producer |
Manage channels, layers, elements |
/app/:id/operator |
Live TAKE/CLEAR control |
/o/:id/channel/:id |
OBS Browser Source overlay |
- Getting Started -- install, first run, create your first workspace
- Core Concepts -- workspaces, channels, layers, elements, modules
- Producer Guide -- build and manage show structure
- Operator Guide -- live show control (take/clear)
- OBS Setup -- connect overlays to OBS Browser Source
- Modules Reference -- built-in module config and actions
- Getting Started -- dev environment setup
- Architecture -- monorepo layout, data flow, tech stack
- Engine Core -- database, CRUD functions, engine logic
- Modules -- how to create a graphics module
- Engine UI -- Nuxt app structure, composables, routing
- WebSocket Protocol -- events, state model, connection lifecycle
- Testing -- Vitest setup, patterns, conventions
pnpm testMIT