NexoCasterDesk

Professional esports broadcast control dashboard with real-time overlays, team management, and OBS integration.

Features

Broadcast Control

Match Control — Score management, team info (names, logos, colors), map/mode selection, Best-Of format
Player & Hero System — 5 player slots per team with role-based hero selection from game configs
Team Presets — Save and quick-load team rosters with logos and colors
Countdown Timer — Configurable timer with quick presets (1/3/5/10/15 min)
Bracket Editor — Tournament bracket creation and management (auto-generated 8-team brackets)
Hotkeys — Customizable keyboard shortcuts for score, teams, countdown

Overlays (OBS Browser Source)

Scoreboard — Team names, logos, scores, colors, map info, Best-Of display
Countdown — MM:SS timer with color states (white → yellow ≤30s → red ≤10s)
Map Pool — Current map image with mode overlay
Bracket — Live tournament bracket visualization
Custom Overlays — Import your own overlays as ZIP files

OBS WebSocket Integration

Direct control of OBS Studio from the dashboard:

Scene Switching — View and switch between OBS scenes
Source Control — Toggle source visibility per scene
Stream & Record — Start/stop streaming and recording with status display
Studio Mode — Preview scene selection and transition control

Viewer Features

Watchlist — Track favorite teams with personalized match result feeds
Multi-Stream — Watch multiple Twitch/YouTube streams in configurable grid (1/2x2/3x3)
Statistics — Match history, Head-to-Head comparisons, win-streak leaderboards

External Integration

REST API for StreamDeck, TouchPortal, Bitfocus Companion
Game config import (.bgg format with maps, modes, heroes, assets)
Match data export/import (JSON)

Tech Stack

Layer	Technology
Frontend	React 18, TypeScript, Tailwind CSS, Zustand, Vite
Backend	Node.js, Express, Socket.IO, Prisma ORM
Database	PostgreSQL (Docker)
OBS	obs-websocket-js v5

Quick Start

Prerequisites

Node.js (v18+)
Docker Desktop
OBS Studio (optional, for OBS integration)

Start Everything

dev.bat

This automatically runs: npm install → Docker → PostgreSQL → Prisma migrations → Server → Client

Access

Dashboard: http://localhost:5173
API Server: http://localhost:3001
Overlays: http://localhost:3001/overlays/scoreboard/

Clean Reset

clean.bat

Removes node_modules, build outputs, Docker volumes, and uploads.

OBS Setup Guide

Prerequisites

Download and install OBS Studio (v28+ required for WebSocket v5)
OBS v28+ has the WebSocket server built in — no plugin needed
If you're on an older version: install obs-websocket plugin v5

Step 1: Configure OBS Scenes

Set up your broadcast scenes in OBS. Typical esports setup:

Scene	Purpose
Starting Soon	Pre-show countdown overlay
Match Live	Main game view with scoreboard overlay
Map Pool	Map selection/veto screen
Replay	Replay playback
Break / BRB	Break screen with countdown
Bracket	Tournament bracket display
End Screen	Post-match results

Step 2: Add NexoCasterDesk Overlays as Browser Sources

For each overlay you want to use:

In OBS, select the scene where you want the overlay
In Sources, click + → Browser
Name it (e.g. "NCD Scoreboard")
Configure:
- URL: http://localhost:3001/overlays/scoreboard/
- Width: 1920 (match your stream resolution)
- Height: 1080
- Custom CSS: leave empty
- Check ✅ Shutdown source when not visible
- Check ✅ Refresh browser when scene becomes active
Click OK

Available overlay URLs:

Overlay	URL
Scoreboard	`http://localhost:3001/overlays/scoreboard/`
Countdown	`http://localhost:3001/overlays/countdown/`
Map Pool	`http://localhost:3001/overlays/mappool/`
Bracket	`http://localhost:3001/overlays/bracket/`
Multi-Stream	`http://localhost:3001/overlays/multistream/`

Tip: Overlays have transparent backgrounds — layer them on top of your game capture.

Step 3: Enable OBS WebSocket Server

Open OBS Studio
Go to Tools → WebSocket Server Settings
Check ✅ Enable WebSocket Server
Server Port: 4455 (default)
Optionally check Enable Authentication and set a password
Click Apply → OK

Step 4: Connect NexoCasterDesk to OBS

Make sure OBS is running with WebSocket enabled
Open NexoCasterDesk dashboard in your browser
Click OBS Control in the sidebar
Enter connection details:
- Host: localhost (or IP if OBS runs on another PC)
- Port: 4455
- Password: your password (leave empty if no auth)
Click Connect
🟢 Green dot = connected, 🔴 Red dot = disconnected

Step 5: Control OBS from NexoCasterDesk

Once connected you can:

Switch Scenes — Click any scene card to switch the live program scene
Toggle Sources — Select a scene, then toggle visibility of individual sources (e.g. hide/show overlays)
Stream Control — Start/stop streaming with status indicator
Recording — Start/stop recording with status indicator
Studio Mode — Enable for preview/program workflow:
1. Toggle Studio Mode on
2. Select a preview scene
3. Click Transition to push it live

Troubleshooting

Problem	Solution
Can't connect	Make sure OBS is open and WebSocket is enabled under Tools → WebSocket Server Settings
Wrong password	Check password in OBS WebSocket settings, or disable authentication to test
Connection drops	OBS might have been restarted — click Reconnect in NexoCasterDesk
Overlays not updating	Check that NexoCasterDesk server is running (`http://localhost:3001/api/health`)
Overlay shows in OBS but no data	Verify the Browser Source URL is correct and reachable
OBS on another PC	Use that PC's IP address instead of `localhost` (both PCs must be on same network)

API Reference

Method	Endpoint	Description
GET	`/api/match`	Get current match
PUT	`/api/match`	Update match data
POST	`/api/match/swap`	Swap teams
POST	`/api/match/reset`	Reset match (auto-saves to history)
POST	`/api/match/score/increment`	Increment score `{ team: 1\|2 }`
POST	`/api/match/score/decrement`	Decrement score `{ team: 1\|2 }`
GET	`/api/stats`	Get match history
GET	`/api/stats/h2h?team1=X&team2=Y`	Head-to-head record
GET	`/api/stats/streaks`	Current win streaks
POST	`/api/obs/connect`	Connect to OBS `{ host, port, password? }`
GET	`/api/obs/scenes`	List OBS scenes
POST	`/api/obs/scene`	Switch scene `{ sceneName }`
GET	`/api/health`	Health check

Full API available at all /api/* endpoints. See Settings page in dashboard for complete reference.

Project Structure

NexoCasterDesk/
├── client/                 # React frontend (Vite)
│   ├── src/
│   │   ├── components/     # UI components
│   │   │   ├── match/      # Match control
│   │   │   ├── teams/      # Team manager
│   │   │   ├── obs/        # OBS WebSocket control
│   │   │   ├── dashboard/  # Watchlist
│   │   │   ├── streams/    # Multi-stream viewer
│   │   │   ├── stats/      # Statistics
│   │   │   ├── bracket/    # Bracket editor
│   │   │   ├── countdown/  # Countdown control
│   │   │   ├── config/     # Game config manager
│   │   │   ├── overlay/    # Overlay manager
│   │   │   ├── hotkeys/    # Hotkey manager
│   │   │   └── settings/   # Settings
│   │   ├── stores/         # Zustand state
│   │   ├── hooks/          # Custom React hooks
│   │   └── lib/            # API client, socket
│   └── public/             # Static assets (logo)
├── server/                 # Express backend
│   ├── src/
│   │   ├── routes/         # API route handlers
│   │   ├── services/       # OBS & Socket.IO services
│   │   └── utils/          # Config parser
│   ├── prisma/             # Database schema & migrations
│   └── uploads/            # User uploads
├── overlays/               # Broadcast overlays (HTML/CSS/JS)
│   ├── scoreboard/
│   ├── countdown/
│   ├── mappool/
│   └── bracket/
├── dev.bat                 # Start everything
├── clean.bat               # Full cleanup
└── checklist.html          # QA test checklist (150+ tests)

Changelog

v1.2.2

Performance

[core] Global teams store with caching — teams are fetched once and shared across Match Control, Team Manager, and Bracket Editor
[core] Eliminates redundant API calls on every tab switch (teams no longer re-fetched on each component mount)

v1.2.1

Fixes

[overlay] Overlay preview now renders at full 1920x1080 and scales down to fit card — all overlay content visible
[overlay] Previously only bottom-positioned elements (map) were visible in the tiny 200px iframe

v1.2.0

Features

[match] Team selection via dropdown — only saved teams can be selected, no manual text input
[match] Selecting a team auto-loads name, logo, color, and players into the match
[match] "Kein Team" option to reset a team slot to defaults
[streams] Streams muted by default (Twitch &muted=true, YouTube &mute=1)
[streams] Twitch mature content warning bypassed via &mature=true
[streams] Dynamic parent parameter for Twitch embeds (no longer hardcoded to localhost)

Removed

[match] Manual team name text input in Match Control (replaced by team selector)
[match] Manual color picker in Match Control (color comes from team preset)
[match] Manual logo upload in Match Control (logo comes from team preset)

v1.1.0

Features

[overlay] Multi-Stream Overlay for OBS browser source — auto-grid layout for multiple Twitch/YouTube streams
[bracket] Click-to-select winner with automatic advancement to next round
[overlay] Inline preview (iframe) in Overlay Manager with toggle button
[ui] Loading spinners on all data-fetching pages (Teams, Brackets, Overlays, Streams, Stats, Watchlist, Hotkeys)
[overlay] Socket.IO broadcast for stream changes (streamsUpdate event)

Fixes

[overlay] Countdown overlay now visible by default (was hidden until started)
[overlay] Mappool overlay shows "No Map Selected" placeholder instead of being invisible
[overlay] Bracket overlay shows placeholder text when no brackets exist
[overlay] Scoreboard overlay error handling for failed API fetch

Security

[deps] Upgrade multer 1.x → 2.x (patched known vulnerabilities)

v1.0.0

Initial Release

[core] Match control with score management, team info, map/mode selection, Best-Of format
[core] Player & Hero system with 5 slots per team and role-based hero selection
[teams] Team presets — save and quick-load rosters with logos and colors
[countdown] Configurable countdown timer with quick presets
[bracket] Tournament bracket creation (4/8/16/32 teams)
[hotkeys] Customizable keyboard shortcuts for score, teams, countdown
[overlay] Scoreboard overlay — team names, logos, scores, colors, map info
[overlay] Countdown overlay — MM:SS timer with color states
[overlay] Map Pool overlay — current map image with mode
[overlay] Bracket overlay — live tournament bracket visualization
[overlay] Custom overlay import via ZIP upload
[obs] OBS WebSocket integration — scene switching, source control, stream/record, studio mode
[streams] Multi-Stream viewer — watch multiple Twitch/YouTube streams in grid layout
[stats] Match history, Head-to-Head comparisons, win-streak leaderboards
[watchlist] Team watchlist with personalized match result feeds
[config] Game config import (.bgg/.ncd format with maps, modes, heroes, assets)
[config] Config Builder for creating custom game configs
[api] REST API for external tools (StreamDeck, TouchPortal, Companion)

License

Private project.

Last reviewed: 2026-04-11

Name		Name	Last commit message	Last commit date
client		client
overlays		overlays
server		server
.env.example		.env.example
.gitignore		.gitignore
README.md		README.md
checklist.html		checklist.html
clean.bat		clean.bat
dev.bat		dev.bat
docker-compose.yml		docker-compose.yml
package-lock.json		package-lock.json
package.json		package.json

Latest commit

History

Folders and files

Repository files navigation

NexoCasterDesk

Features

Broadcast Control

Overlays (OBS Browser Source)

OBS WebSocket Integration

Viewer Features

External Integration

Tech Stack

Quick Start

Prerequisites

Start Everything

Access

Clean Reset

OBS Setup Guide

Prerequisites

Step 1: Configure OBS Scenes

Step 2: Add NexoCasterDesk Overlays as Browser Sources

Step 3: Enable OBS WebSocket Server

Step 4: Connect NexoCasterDesk to OBS

Step 5: Control OBS from NexoCasterDesk

Troubleshooting

API Reference

Project Structure

Changelog

v1.2.2

Performance

v1.2.1

Fixes

v1.2.0

Features

Removed

v1.1.0

Features

Fixes

Security

v1.0.0

Initial Release

License

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages