# tyhad/liveoverlay architecture

> Architecture diagram of the GitHub repository tyhad/liveoverlay, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/tyhad/liveoverlay
- Repository: https://github.com/tyhad/liveoverlay

## Overview

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: [`public/overlay.html`](https://github.com/tyhad/liveoverlay/blob/main/public/overlay.html) (Scene Overlay), [`public/index.html`](https://github.com/tyhad/liveoverlay/blob/main/public/index.html) (Visual Editor), [`src/index.ts`](https://github.com/tyhad/liveoverlay/blob/main/src/index.ts) (Platform Connector), [`public/animation-engine.js`](https://github.com/tyhad/liveoverlay/blob/main/public/animation-engine.js) (Animation Engine)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_design["Scene Design"]
  node_editor["Visual Editor<br/>[index.html]"]
  node_scene_edit["Scene Editing<br/>[index.html]"]
  node_animation_editor["Animation Sequences<br/>[index.html]"]
  node_asset_ui["Asset Panel<br/>[index.html]"]
end

subgraph group_render["Overlay Runtime"]
  node_overlay["Scene Overlay<br/>[overlay.html]"]
  node_animation_engine["Animation Engine"]
  node_running_text["Running And Scroll Text<br/>[overlay.html]"]
end

subgraph group_server["Local Server"]
  node_server["Elysia Server<br/>[index.ts]"]
  node_scene_api["Scene API<br/>[index.ts]"]
  node_scene_store[("Scene Persistence<br/>[index.ts]")]
  node_asset_api["Asset Management<br/>[index.ts]"]
  node_asset_files[("Uploaded Assets")]
end

subgraph group_data["Live Data"]
  node_stats_api["Live Stats API<br/>[index.ts]"]
  node_platform_connector["Platform Connector<br/>[index.ts]"]
  node_tiktok["TikTok Live"]
  node_youtube["YouTube Data API"]
  node_stats_store[("Live Stats File<br/>[index.ts]")]
  node_f1_api["F1 Data Endpoint<br/>[index.ts]"]
  node_f1_db[("F1GStats SQLite")]
end

node_designer(("Streamer"))
node_overlay_user(("OBS Browser Source"))

node_designer -->|"designs scenes"| node_editor
node_editor -->|"edits elements"| node_scene_edit
node_editor -->|"configures sequences"| node_animation_editor
node_editor -->|"uploads assets"| node_asset_ui
node_editor -->|"loads and saves"| node_scene_api
node_overlay_user -->|"opens scene"| node_overlay
node_overlay -->|"loads scene"| node_scene_api
node_scene_api -->|"reads and writes"| node_scene_store
node_server -->|"serves editor"| node_editor
node_server -->|"serves overlay"| node_overlay
node_asset_ui -->|"uploads assets"| node_asset_api
node_asset_api -->|"stores files"| node_asset_files
node_overlay -->|"plays sequences"| node_animation_engine
node_overlay -->|"renders scrolling text"| node_running_text
node_overlay -->|"loads live stats"| node_stats_api
node_stats_api -->|"reads and writes"| node_stats_store
node_platform_connector -.->|"connects to"| node_tiktok
node_platform_connector -.->|"fetches stats"| node_youtube
node_platform_connector -->|"updates stats"| node_stats_store
node_overlay -->|"loads F1 data"| node_f1_api
node_f1_api -->|"reads snapshot"| node_f1_db

click node_editor "https://github.com/tyhad/liveoverlay/blob/main/public/index.html"
click node_scene_edit "https://github.com/tyhad/liveoverlay/blob/main/public/index.html"
click node_animation_editor "https://github.com/tyhad/liveoverlay/blob/main/public/index.html"
click node_asset_ui "https://github.com/tyhad/liveoverlay/blob/main/public/index.html"
click node_overlay "https://github.com/tyhad/liveoverlay/blob/main/public/overlay.html"
click node_animation_engine "https://github.com/tyhad/liveoverlay/blob/main/public/animation-engine.js"
click node_running_text "https://github.com/tyhad/liveoverlay/blob/main/public/overlay.html"
click node_server "https://github.com/tyhad/liveoverlay/blob/main/src/index.ts"
click node_scene_api "https://github.com/tyhad/liveoverlay/blob/main/src/index.ts"
click node_scene_store "https://github.com/tyhad/liveoverlay/blob/main/src/index.ts"
click node_asset_api "https://github.com/tyhad/liveoverlay/blob/main/src/index.ts"
click node_stats_api "https://github.com/tyhad/liveoverlay/blob/main/src/index.ts"
click node_platform_connector "https://github.com/tyhad/liveoverlay/blob/main/src/index.ts"
click node_stats_store "https://github.com/tyhad/liveoverlay/blob/main/src/index.ts"
click node_f1_api "https://github.com/tyhad/liveoverlay/blob/main/src/index.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_editor,node_scene_edit,node_animation_editor,node_asset_ui,node_overlay_user toneBlue
class node_overlay,node_animation_engine,node_running_text toneAmber
class node_server,node_scene_api,node_scene_store,node_asset_api,node_asset_files toneMint
class node_stats_api,node_platform_connector,node_tiktok,node_youtube,node_stats_store,node_f1_api,node_f1_db toneRose
class node_designer toneIndigo
```

## Components

### Scene Design

- [Visual Editor](https://github.com/tyhad/liveoverlay/blob/main/public/index.html): `public/index.html`
- [Scene Editing](https://github.com/tyhad/liveoverlay/blob/main/public/index.html): `public/index.html`
- [Animation Sequences](https://github.com/tyhad/liveoverlay/blob/main/public/index.html): `public/index.html`
- [Asset Panel](https://github.com/tyhad/liveoverlay/blob/main/public/index.html): `public/index.html`

### Overlay Runtime

- [Scene Overlay](https://github.com/tyhad/liveoverlay/blob/main/public/overlay.html): `public/overlay.html`
- [Animation Engine](https://github.com/tyhad/liveoverlay/blob/main/public/animation-engine.js): `public/animation-engine.js`
- [Running And Scroll Text](https://github.com/tyhad/liveoverlay/blob/main/public/overlay.html): `public/overlay.html`

### Local Server

- [Elysia Server](https://github.com/tyhad/liveoverlay/blob/main/src/index.ts): `src/index.ts`
- [Scene API](https://github.com/tyhad/liveoverlay/blob/main/src/index.ts): `src/index.ts`
- [Scene Persistence](https://github.com/tyhad/liveoverlay/blob/main/src/index.ts): `src/index.ts`
- [Asset Management](https://github.com/tyhad/liveoverlay/blob/main/src/index.ts): `src/index.ts`
- **Uploaded Assets**

### Live Data

- [Live Stats API](https://github.com/tyhad/liveoverlay/blob/main/src/index.ts): `src/index.ts`
- [Platform Connector](https://github.com/tyhad/liveoverlay/blob/main/src/index.ts): `src/index.ts`
- **TikTok Live**
- **YouTube Data API**
- [Live Stats File](https://github.com/tyhad/liveoverlay/blob/main/src/index.ts): `src/index.ts`
- [F1 Data Endpoint](https://github.com/tyhad/liveoverlay/blob/main/src/index.ts): `src/index.ts`
- **F1GStats SQLite**

### Other components

- **Streamer**
- **OBS Browser Source**

## Connections

- 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