Easy OBS Race Overlay Generator for New Casters

I created a simple, browser-based race overlay tool designed to make live event streaming easier for new casters. It provides a complete, ready-to-use layout that works as a single OBS Browser Source with minimal setup.

You can try it here: EASY SPEEDRUN RACE OVERLAY

Race Overlay Preview

Click To Open An Example

What the Tool Provides

This overlay includes:

All configuration is stored directly in the URL, so once the layout is prepared, the link can be copied into OBS and reused at any time.

Purpose and Benefits

Setting up race streams in OBS can be challenging for newer casters, especially when managing multiple video feeds, layered graphics, and timer widgets. This tool reduces that complexity by providing an integrated layout that can be configured directly in the browser.

If a user can type into a text field and paste a URL into OBS, they can successfully operate this overlay.

How to Use the Overlay

  1. Open the webpage.
  2. Enter player names and Twitch channel names.
  3. Click profile images to set profile icons and background artwork.
  4. Adjust the match title, player scores, and timer duration.
  5. Copy the final URL into OBS as a Browser Source.

Once added to OBS, you can make adjustments by interacting with the OBS Source.
REFRESHING THE SOURCE WILL RESET THE TIMER
If you need to refresh an individual stream, pause it within the source then resume it. That should refresh it. Adding a button to refresh individual streams is on the TODO

How the Overlay System Works

The overlay system relies entirely on URL parameters for dynamic customization. Everything else (<div class="graphic">, headings, paragraphs) is static content explaining the tool and providing previews.

The key variables that actually control the overlay in OBS are:

Variable Purpose
matchTitle The title of the race match displayed on the overlay.
leftProfile / rightProfile URLs of the player profile images for the left and right players.
leftProfileBg / rightProfileBg Background images behind each player’s profile card.
leftName / rightName Display names of the left and right players.
leftChannel / rightChannel Twitch channel names for each player. Used to automatically load their video feeds.
bg / headerbg Background image URLs for the overlay and the top header/banner.
initialMinutes Initial countdown duration for the race timer, in minutes.

These variables are stored in the URL address and read by some javascript to generate the final layout dynamically in your browser. That means it can be easily shared just by copying and pasting the URL.

Intended Use Cases

The overlay is well suited for: