1 / 3Built interface — Live HUD
Overview
CS2 Broadcast HUD is a set of browser-source overlays for Counter-Strike 2 productions. A small Node.js relay receives the Game State Integration feed from the observer client, normalises it and pushes it to the HUD pages over a local websocket. The top bar shows team names, score, round number and the round timer, and it swaps to the bomb timer when the bomb is planted, with the defuse window drawn as a shrinking bar.
Player cards sit on each side of the screen and show health, armour and helmet state, money, primary weapon, grenades and the defuse kit, with a kill and death count for the map. The card of the player being observed is highlighted, so the audience always knows whose view they are watching. A round history strip along the top records each round as a win icon by type, and a team economy panel can be shown between rounds with buy predictions.
Everything is configured in one JSON file: team names, logos, colours, sponsor slots, the corner used for the minimap and which panels are enabled. Team logos are read from a folder you fill, and the layout scales for 1080p and 1440p canvases. The relay, the HUD pages and the config are delivered as source code, so the whole thing runs on the production PC without a hosted service.
Counter-Strike 2 patches change the GSI payload from time to time, and this plan keeps the parser current. When Valve alters a field, adds a weapon or changes how observer slots are reported, the relay and the cards are updated and the new build is placed in your Gaming Library. Notes with each release explain what changed and whether your config needs an edit.
What you get
- Node.js GSI relay that reads the observer feed and serves the HUD over a local websocket
- Top bar with team names, score, round number, round timer and bomb timer states
- Ten player cards with health, armour, money, weapon, utility and defuse kit
- Round history strip with win-type icons for every round of the map
- Team economy panel with loss bonus tracking and buy predictions for the next round
- One JSON config for teams, logos, colours, sponsor slots and panel toggles
- Gamestate cfg file for the observer client with the correct URI and timeout
- Setup guide covering OBS browser sources, canvas sizes and a test replay
Eligible resources
The plan covers these resource types. Individual resources are listed in your Gaming Library as they publish.
- HUD pages
- GSI relay
- Player cards
- Economy panel
- Config schema
- Setup guide
Features
- Driven by the game state
- The observer client posts its game state to the relay, so score, timers, health and money update on the overlay without anyone typing.
- Cards follow the observer
- The card of the player currently observed is highlighted and the weapon slot updates on every pickup, drop and buy.
- Kept current with patches
- When a Counter-Strike 2 update changes the GSI payload, the parser and cards are revised and the new build is placed in your library.
Compatibility and requirements
Works with
- Counter-Strike 2 observer client with Game State Integration enabled
- OBS Studio 30 or newer with browser sources, or any browser-source capable software
- Node.js 20 or newer for the relay
- 1080p and 1440p canvases, 16:9
You need
- A PC running the CS2 observer client with the gamestate cfg installed
- Node.js on the same machine or the production LAN
- Team logos as PNG files with transparent backgrounds
Updates and content cadence
- The full HUD, relay and config from your first day
- Parser and card revisions when Counter-Strike 2 patches change the game state feed
- Layout updates for new weapons, utility and observer slot behaviour
License
- Licensed for your own community, server, team or channel.
- You may edit and publish the designs (or run the tools) for that community.
- Reselling the files or offering them as templates is not permitted.
Installation
- 1Download CS2 Broadcast HUD from your Gaming Library.
- 2Copy the gamestate_integration cfg into the observer client's cfg folder.
- 3Run npm install and npm start in the relay folder, then open the local HUD URL.
- 4Edit hud.config.json with team names, colours and logo paths.
- 5Add the HUD URL as an OBS browser source at your canvas size and test with a demo.
If you cancel
- Access and updates continue until the end of the period you paid for.
- The licence to run the HUD ends with the subscription.
- Stop publishing the HUD once access ends.
More from DistroSource Gaming
Browse all
3CS2, Valorant & EsportsBroadcast HUDs
Valorant Broadcast Pack
Broadcast overlays for Valorant matches that a producer operates from a local control panel, covering agent select, scoreboard, veto, round summary, spotlight and caster lower thirds.
- Broadcast HUD
- Control panel
- Update plan
View details$45/mo
Subscription
3CS2, Valorant & EsportsBroadcast HUDs
Caster & Analyst Desk Kit
Desk and segment overlays for casters and analysts, from name plates and lower thirds to head-to-head panels, map pool boards, prediction polls, sponsor loops and a break screen.
- Desk overlays
- OBS
- Update plan
View details$22/mo
Subscription
3CS2, Valorant & EsportsBundles
Broadcast Production Bundle
The production stack for a tournament organiser in one plan: CS2 and Valorant broadcast packs, the caster desk kit, tournament manager, both server kits and the match graphics drop.
- Production
- Broadcast
- Membership
View details$119/mo
Subscription
$49/mo
CS2 Broadcast HUD
