How tyhad/liveoverlay works
LiveOverlay Studio is a visual editor and local server for designing live-stream overlays, then rendering scenes in browser sources. The principal workflow is edit a scene, save it through the server, and load that scene in an overlay; the README also documents assets, animations, multiple scenes, live platform statistics, and F1 data. The server implementation is sampled in src/index.ts; editor and overlay details and some integrations are documented but their source was not sampled, so uncertain internal links are omitted.
Main entry points: overlay.html Scene Overlay · index.html Visual Editor · index.ts Platform Connector · animation-engine.js Animation Engine
Components 21
Scene Design
- Visual Editor
public/index.html - Scene Editing
public/index.html - Animation Sequences
public/index.html - Asset Panel
public/index.html
Overlay Runtime
- Scene Overlay
public/overlay.html - Animation Engine
public/animation-engine.js - Running And Scroll Text
public/overlay.html
Local Server
- Elysia Server
src/index.ts - Scene API
src/index.ts - Scene Persistence
src/index.ts - Asset Management
src/index.ts - Uploaded Assets
Live Data
- Live Stats API
src/index.ts - Platform Connector
src/index.ts - TikTok Live
- YouTube Data API
- Live Stats File
src/index.ts - F1 Data Endpoint
src/index.ts - F1GStats SQLite
Other components
- Streamer
- OBS Browser Source
Connections 21
- Streamer → Visual Editor: designs scenes
- Visual Editor → Scene Editing: edits elements
- Visual Editor → Animation Sequences: configures sequences
- Visual Editor → Asset Panel: uploads assets
- Visual Editor → Scene API: loads and saves
- OBS Browser Source → Scene Overlay: opens scene
- Scene Overlay → Scene API: loads scene
- Scene API → Scene Persistence: reads and writes
- Elysia Server → Visual Editor: serves editor
- Elysia Server → Scene Overlay: serves overlay
- Asset Panel → Asset Management: uploads assets
- Asset Management → Uploaded Assets: stores files
- Scene Overlay → Animation Engine: plays sequences
- Scene Overlay → Running And Scroll Text: renders scrolling text
- Scene Overlay → Live Stats API: loads live stats
- Live Stats API → Live Stats File: reads and writes
- Platform Connector → TikTok Live: connects to
- Platform Connector → YouTube Data API: fetches stats
- Platform Connector → Live Stats File: updates stats
- Scene Overlay → F1 Data Endpoint: loads F1 data
- F1 Data Endpoint → F1GStats SQLite: reads snapshot