A tiny, always-on-top OBS companion — always know what is live right now.
Website: livehud.e4dx.com
LiveHUD sits beside your work and answers one question at a glance:
What is live right now?
It listens to OBS over WebSocket and stays in sync whether scenes change manually, via hotkeys, a Stream Deck, or plugins like Advanced Scene Switcher.
▶ Watch the demo · Download MP4
- Scene list — all OBS scenes with the active scene highlighted (gradient row in the full panel, numbered circles in compact mode)
- Real-time updates —
CurrentProgramSceneChanged,SceneListChanged, and related WebSocket events - Scene switching — click any scene in LiveHUD to switch OBS (optional monitor-only use is fine too)
- Microphone — mute state for OBS’s default mic / first audio input; click to toggle mute
- Camera — auto-detects all OBS Video Capture Device sources (webcam, capture card, etc.); click to activate/deactivate them together (same as the Activate/Deactivate button in OBS source properties). Control is disabled when no capture devices exist. No per-source configuration yet — all matching sources toggle as one.
- Recording — start, stop, pause/resume; duration shown while recording (or “Paused” when paused)
- Streaming — start/stop; stream destination label when starting from the full panel (Twitch, YouTube, Custom, WHIP, etc.)
- Connection — footer shows connected, connecting, or disconnected; one automatic reconnect attempt after an unexpected WebSocket drop, then manual Connect; compact mode uses a connect icon when OBS is unreachable
| View | Description |
|---|---|
| Default panel | Vertical layout — scene list, status rows, footer |
| 2-column panel | Scenes on the left, status controls on the right (Settings → General → View mode) |
| Compact widget | Small floating HUD; toggle from the header compact button |
| Compact vertical | Scenes stacked with mic, camera, record, and stream controls below |
| Compact horizontal | Scenes in a row with mic, camera, record, and stream controls beside them (Settings → General → Compact widget) |
Switch between full panel and compact without reconnecting — both views share one OBS connection and stay painted in sync.
- Frameless, transparent, always-on-top window (pin toggle in header)
- Draggable header (full panel) or grip handle (compact)
- Dark, light, and system themes
- Remembers compact window position when expanding and shrinking
- Single instance — launching again focuses the existing window
- Session cache for instant UI when switching views
- Detect whether OBS is running
- Start OBS from the disconnected state
- Focus OBS from the footer (brings the OBS window to the foreground)
- WebSocket settings: host, port, password
- OBS Studio 28+ (WebSocket server built in)
- Windows — recommended; OBS launch/focus helpers are Windows-only today
- Node.js 18+ and Rust toolchain (for development / builds)
- Open OBS → Tools → WebSocket Server Settings
- Enable the WebSocket server (default port 4455)
- Set a password if you use one
- In LiveHUD → Settings → WebSocket, enter host (
127.0.0.1), port, and password → Save & Connect
On first connect, LiveHUD loads scenes, stream/recording state, mic mute, camera capture state, and stream service info from OBS.
Open the gear icon in the footer (full panel).
| Section | Options |
|---|---|
| General → Theme | Dark, Light, System |
| General → View mode | Default (vertical panel), 2-column (scenes beside controls) |
| General → Compact widget | Vertical (stacked) or Horizontal (row) |
| WebSocket | Host, port, password |
App preferences are stored in localStorage (livehud.app, livehud.obs). Panel state is cached in sessionStorage for the current session.
# Install dependencies
npm install
# Run in dev mode (Vite + Tauri)
npm run dev
# Type-check and build frontend only
npm run buildFrontend dev server runs on port 1420 (see vite.config.ts).
livehud/
├── index.html # Full panel + compact widget markup
├── livehud-mock.png # Design reference
├── project-details.md # Product spec
├── docs/plan.md # Implementation plan
├── src/
│ ├── main.ts # Bootstrap, settings, view switching
│ ├── core/ # Types, icons, theme, app metadata
│ ├── obs/ # WebSocket client, snapshots, stream/capture helpers
│ ├── storage/ # App settings + session panel cache
│ ├── app/ # OBS ↔ UI wiring, composite controller
│ ├── ui/ # Full panel, compact widget, shared DOM helpers
│ └── layout/ # View switching, window bounds, compact sizing
├── styles/
│ ├── shared.css # Tokens, transport buttons, record icon
│ ├── panel-default.css # Full panel + settings dialog
│ ├── panel-horizontal.css
│ ├── panel-compact.css # Compact vertical + horizontal
│ └── theme-light.css
└── src-tauri/ # Tauri 2 shell (window, OBS process helpers)
┌─────────────────────────────────────────┐
│ Tauri 2 (Rust) │
│ Window · single-instance · OBS launch │
└─────────────────┬───────────────────────┘
│
┌─────────────────▼───────────────────────┐
│ TypeScript (Vite, no framework) │
│ main.ts → app/app.ts → obs/obs.ts │
│ ↘ compositeController ↙ │
│ ui/panel.ts ui/compact.ts │
└─────────────────┬───────────────────────┘
│ WebSocket v5
▼
OBS Studio :4455
npm run tauri buildInstallers and binaries are written under src-tauri/target/release/bundle/.
Uses cargo-release to bump versions in one step.
- Add notes under
## [Unreleased]in CHANGELOG.md. - Run one of:
npm run release:patch # 0.1.0 → 0.1.1
npm run release:minor # 0.1.0 → 0.2.0
npm run release:major # 0.1.0 → 1.0.0This will:
- Bump version in
Cargo.toml,package.json, andtauri.conf.json - Replace
## [Unreleased]inCHANGELOG.mdwith the new version and date, and add a fresh## [Unreleased]section - Commit and tag locally (
v0.1.1)
- Push the commit and tag:
git push && git push --tagsThe Publish workflow runs on v* tags, builds installers for Windows, macOS, and Linux, and creates a draft GitHub release with the changelog body for that version.
| Layer | Choice |
|---|---|
| Desktop | Tauri 2 |
| UI | HTML, CSS, TypeScript (no React) |
| Bundler | Vite |
| OBS | obs-websocket-js v5 |
| Icons | Inline SVGs |
MIT © 2026 Sandeep MT