You're the one bringing races to life for viewers. Racey provides six real-time broadcast overlays designed to drop straight into OBS (or any streaming software that supports browser sources). This guide walks you through setup, configuration, and troubleshooting.
Getting Set Up
Getting the broadcaster role
Your league admin assigns you the Broadcaster role through League Settings > Staff Management. Once assigned, you get three permissions:
| Permission | What it unlocks |
|---|---|
broadcast.access | Access the broadcaster dashboard and tools |
broadcast.overlay | View and manage overlay URLs |
analytics.view | View broadcast and league analytics |
You'll see a new Broadcast section in your navigation once the role is active.
Plan requirement
Broadcast overlays require a Pro or Enterprise plan. Free-tier leagues don't have access to the overlay system. During the 90-day trial, overlays are available — so your league can test them before committing.
The six overlay types
Racey ships with six broadcast overlays, each designed for a different purpose:
1. Timing Tower
The classic position tower on the left side of the screen. Shows every driver's position, gap to the leader, fastest lap indicator, pit status, and DNF status. Includes car number, driver name, and a team color stripe.
Customization:
theme=darkortheme=light— controls background and text colorsrows=1-20— how many drivers to show (default: 20)
2. Championship Standings
A lower-third strip (bottom 80 pixels) showing the championship standings as a bar chart. Each bar uses the driver's team color. The leader is highlighted in yellow. Shows position, driver name, and points.
3. Driver Card
A featured driver popup in the lower-left corner. Slides in with a smooth 700ms animation. Displays the driver's number, name, team, and key stats (starts, wins, podiums, championship position and points). If the driver has a profile photo, it's shown; otherwise you get a number/nationality fallback.
Customization:
driverId=<userId>— override which driver is featured. Without this, Racey auto-selects the fastest lap holder or race leader.
4. Incident Ticker
Recent stewarding notices and broadcast updates in the bottom-left area. Shows up to 3 incidents at a time, color-coded by severity:
| Severity | Color | Use case |
|---|---|---|
| Investigation | Yellow | Incident under review |
| Penalty | Red | Penalty applied |
| Warning | Amber | Official warning issued |
| Note | Blue | General broadcast note |
Each entry shows the lap number, incident message, and severity label. New items slide in from the left.
5. Fastest Lap
A stinger overlay in the top-right corner that highlights the current fastest lap holder. Shows the driver's name, lap time, delta to the second-fastest lap, and which lap it was set on. Uses a purple/fuchsia gradient background. Appears and disappears dynamically based on fastest lap data.
6. Battle Tracker
Displays the closest on-track battle in the top-right area. Shows "Battle for P[X]" with both drivers, the gap in seconds, and a progress bar visualization using team colors. Slides in with a 700ms animation when a close battle is detected.
OBS Setup
Step-by-step: adding a browser source
- Open OBS Studio
- In your scene, click the + button under Sources
- Select Browser
- Name it something useful (e.g., "Racey Timing Tower")
- Set the URL to the overlay URL from your broadcaster dashboard
- Set Width to
1920and Height to1080 - Check Shutdown source when not visible to save resources
- Click OK
The overlay renders on a transparent background, so it layers cleanly over your race footage.
Getting the overlay URL
- Go to your Broadcast Dashboard in Racey
- Select the league you're broadcasting for
- Choose the overlay type you want
- Copy the URL
The URL format is:
https://your-racey-url/broadcast/overlay/timing-tower?leagueId=<id>
For other overlay types, replace timing-tower with:
standingsdriver-cardincident-tickerfastest-lapbattle-tracker
Token-protected overlays
If the league admin has set up overlay protection (for private leagues), you'll need to include a token in the URL:
https://your-racey-url/broadcast/overlay/timing-tower?leagueId=<id>&token=<signed-token>
The league admin generates this token and shares it with you. It's an HMAC-SHA256 signature tied to the league — it won't work with other leagues. Without the token, a protected overlay returns a 403 error.
If no overlay secret is configured on the league, the overlays are public and no token is needed.
Round-specific overlays
To show data for a specific round (instead of the latest), add the roundId parameter:
https://your-racey-url/broadcast/overlay/timing-tower?leagueId=<id>&roundId=<roundId>
Real-Time Features
How live updates work
Racey overlays use Server-Sent Events (SSE) for real-time updates. Here's how the data flows:
flowchart LR
A[Race Data] --> B[Racey Server]
B --> C[SSE Stream]
C --> D[OBS Browser Source]
D --> E[Your Stream]
B --> F[Redis Pub/Sub]
F --> C
The overlay page polls the broadcast state every 15 seconds by default, but instantly refreshes when an SSE event arrives (results published, incident posted, timing update).
Auto-reconnect
If the connection drops (network hiccup, server restart), the overlay automatically reconnects using exponential backoff:
- First retry: 1 second
- Second retry: 2 seconds
- Third retry: 4 seconds
- Maximum wait: 30 seconds
Once reconnected, the overlay fetches fresh data immediately. You don't need to do anything — it recovers on its own.
Heartbeat
The server sends a heartbeat every 30 seconds to keep the connection alive. This prevents browsers and proxies from closing idle connections. If the overlay stops receiving heartbeats, it triggers the auto-reconnect flow.
Publishing broadcast updates
With broadcast.access permission, you can publish live announcements to overlays:
- POST a broadcast update with a title, message, and severity (investigation, penalty, warning, note)
- The update appears in the Incident Ticker overlay for all viewers
- Penalty and warning announcements are auto-pinned
- Updates are also sent to Discord if the league has the integration configured
Overlay Customization
Branding and colors
The league's primary and secondary colors (configured in league settings) are used throughout the overlays:
- Primary color — default
#dc2626(red) - Secondary color — default
#0f172a(dark slate) - Team colors — generated from team names using a deterministic hash
The league admin configures these colors in League Settings. You'll see them reflected in the timing tower's team stripes, the standings bar chart, and the battle tracker's gap bar.
Watermark
Leagues on the Free plan (or expired trials) display a "Powered by Racey" watermark in the bottom-right corner of all overlays at 50% opacity. Pro and Enterprise leagues have no watermark.
Which overlays work best for which race type
| Race type | Recommended overlays |
|---|---|
| Sprint race | Timing Tower + Fastest Lap + Battle Tracker |
| Endurance | Timing Tower + Driver Card + Incident Ticker |
| Multi-class | Timing Tower (shows class) + Standings (per-class) |
| Championship finale | Timing Tower + Standings + Battle Tracker |
| Oval | Timing Tower + Fastest Lap + Incident Ticker |
Troubleshooting
Overlay not loading
- Check the URL — make sure the
leagueIdis correct and the overlay type is spelled right - Check the token — if the league uses overlay protection, verify the token is included and valid
- Check the plan — overlays require Pro or Enterprise. Free-tier leagues get a 403 response
- Check OBS settings — width should be 1920, height 1080. Make sure "Shutdown source when not visible" isn't hiding it
Data not updating
- SSE connection — the overlay should show live data. If it's stale, the SSE connection may have dropped. Try refreshing the browser source in OBS (right-click > Refresh)
- Results not published — overlay data comes from published results. If the race director hasn't published yet, the data won't appear
- Server down — check if the Racey app is running
Wrong data showing
- Wrong round — if you're using a
roundIdparameter, make sure it points to the current round - Cache — try right-clicking the browser source in OBS and selecting Refresh
- Wrong league — double-check the
leagueIdin the URL
OBS performance tips
- Use Browser Source (not Window Capture) for best performance
- Set FPS to match your stream (30 or 60)
- Enable Hardware acceleration in OBS browser source settings
- Only keep visible overlays active — use the eye icon in OBS to hide unused ones
- If overlays feel sluggish, check your system resources — browser sources use GPU for rendering
Related Guides
- League Admin Guide — how admins set up overlays and generate tokens
- Race Director Guide — how results get published (which feeds overlay data)
- Quick Reference — broadcaster permissions at a glance