Skip to content

Quick Start: OBS Overlay

This guide puts live scores from your machines into an OBS scene, using the scorbit-feed agent and the starter overlay that ships with it. You don't need to write any code.

Before You Start

1. Install the Package

Create a folder for your overlay, open a terminal in it, and run:

npm install @scorbit/feed

2. Check What Your Key Covers

SCORBIT_API_KEY=sb_live_... npx @scorbit/feed machines

Replace sb_live_... with your key. The command prints, as JSON, every machine your key covers: its uuid, game name and venue. If a machine you expect is missing, check the key's scope on the Developer page.

Use npx @scorbit/feed, never npx scorbit-feed

Without a local install, npx scorbit-feed downloads a different, unrelated package. Always run the agent as npx @scorbit/feed.

Windows PowerShell

The examples use macOS and Linux shell syntax. In PowerShell:

  • Set the key first with $env:SCORBIT_API_KEY = "sb_live_...", then run each command without the SCORBIT_API_KEY=... prefix.
  • Put each command on one line, without the trailing \.
  • Quote a list of machines: --machines "<uuid>,<uuid>".

3. Start the Agent with the Starter Overlay

SCORBIT_API_KEY=sb_live_... npx @scorbit/feed \
  --static node_modules/@scorbit/feed/templates/overlay

This opens a feed for everything your key covers and serves the starter overlay at http://127.0.0.1:8787/. Open that address in a browser to check it: you should see one card per machine, updating live.

To show only some machines, list their uuids from step 2, in the order you want them. You must do this if your key covers more than 50 machines, the most one feed can carry; otherwise the agent stops with scope_too_large.

SCORBIT_API_KEY=sb_live_... npx @scorbit/feed --machines <uuid>,<uuid> \
  --static node_modules/@scorbit/feed/templates/overlay

4. Add It to OBS

  1. In OBS, in the Sources panel of your scene, click + and choose Browser.
  2. Name the source, for example "Scorbit scores", and click OK.
  3. Set URL to http://127.0.0.1:8787/.
  4. Set the width and height to your canvas size, for example 1920 × 1080, and click OK.
  5. Position and resize the source in your scene.

The overlay has a transparent background, so it sits on top of your camera or game capture.

5. Stop the Agent

Press Ctrl-C in the terminal. The agent ends the feed it opened and exits. You can also stop the feed from the Developer page in Scorbit Console.

The agent must keep running for the overlay to update. Keep the terminal open while you stream.

Customize the Overlay

The starter overlay is plain HTML, CSS and JavaScript with no dependencies. To make it your own, copy the folder out of node_modules and point --static at your copy:

cp -r node_modules/@scorbit/feed/templates/overlay ./my-overlay
SCORBIT_API_KEY=sb_live_... npx @scorbit/feed --static ./my-overlay

Restyle it freely, but keep the Scorbit attribution visible: the logo slot at the bottom of the overlay is required by the Developer Terms. See Branding and Media Kit.

The overlay shows a small connection dot: a ring while connecting, filled when live, and a dash once the feed has ended. It shows "No machines in this feed yet" when a feed currently covers no machines.

Next Steps