How to add a live scoreboard to OBS

If you stream matches — esports, sports, a casual FIFA tournament with friends — your viewers want to see the score on screen. The cleanest way to do that in OBS Studio is with a browser-source scoreboard overlay: a small web page that renders the score and updates live as the match progresses. No restart, no scene swap, no Photoshop.

This guide walks through the whole setup. The example uses Quadraviz for the live data layer, but the OBS scoreboard overlay technique itself works with any tool that can serve a browser source.

#Why a browser-source scoreboard beats image-based overlays

Most beginner tutorials still tell you to drop a PNG on a scene and edit text labels by hand between rounds. That works once. It falls apart the second you need to update the score mid-round or push a new graphic without interrupting the stream.

A browser-source overlay is a tiny live web page. The page subscribes to your match data, redraws when the score changes, and animates transitions. The encoder (OBS) doesn't have to know anything happened — it just keeps rendering the same browser source. That's why every TV broadcast and serious esports production uses this pattern.

You get three things image overlays can't give you:

Real-time updates. Change the score in a dashboard, see it on stream in under a second.
Animations. Score changes pop, lower thirds slide in, the clock ticks.
Multiple operators. Your co-caster, observer, or producer can drive the overlay from their own machine.

#Prerequisites

Before you start, make sure you have:

OBS Studio 28 or newer. Browser source is built in, no plugin needed.
A live-graphics tool that gives you a scene URL. We'll use Quadraviz, which has a free tier — feel free to substitute another tool that exposes browser-source URLs.
A second monitor or a separate device for the control dashboard. You don't need one, but operating the overlay from the same machine that's encoding the stream is painful.

If you're missing OBS, grab it from obsproject.com. It's free and the de-facto standard for streaming.

#Step 1 — Create the channel and pick a scene

In Quadraviz, a channel is the live endpoint OBS connects to. One channel maps to one browser source.

Sign in at the dashboard.
Click New channel and name it after your stream — "Main stream" works.
Open the Scenes library and pick a scoreboard template. The classic two-team scoreboard with team names, scores, and a timer is a good starting point.
Click Use this scene.

The dashboard now shows live controls: team A, team B, score A, score B, period, clock.

#Step 2 — Copy the browser source URL

In the channel header, click Get URL. Copy it to your clipboard. It looks something like:

https://controller.quadraviz.com/render/<your-channel-id>

That URL is the only thing OBS needs. Anyone who has it can view your overlay — keep it private.

#Step 3 — Add a browser source in OBS

In OBS:

Select the scene you want the scoreboard to appear on (probably your "Live" scene).
In Sources, click + → Browser.
Name it Scoreboard and click OK.
Paste the URL into the URL field.
Set Width to 1920 and Height to 1080 (match your canvas).
Check Shutdown source when not visible — this keeps idle scenes from holding a connection.
Click OK.

The scoreboard should appear on the OBS canvas immediately. Drag it to position it — most templates are designed to sit at the top or bottom of the screen.

#Step 4 — Test the live update

This is the moment that proves the OBS scoreboard overlay is actually live. With OBS open and the scoreboard visible:

In the Quadraviz dashboard, change Score A from 0 to 1.
Watch OBS.

You should see the score tick over inside about 200 milliseconds. If it does, you're done — your scoreboard is wired up and broadcasting.

If it doesn't update, jump to "Common problems" below.

#Step 5 — Position and chrome-key (optional)

Most scoreboard templates have a transparent background. If yours doesn't, OBS lets you apply a chroma key filter to a browser source — right-click the source → Filters → + → Chroma Key. But honestly: pick a template that's already transparent. It's less hassle.

For positioning:

Top of screen for traditional sports — viewers expect it there.
Bottom of screen for esports — keeps the top clean for player POVs.
Bottom-left corner for casual streams — out of the way but still visible.

#Step 6 — Bind it to live data (optional)

If you don't want to type scores by hand, you can wire the scoreboard to your match data source. Quadraviz has a REST API and webhooks — the same pattern any modern broadcast graphics tool uses.

A minimal Node script that bumps the score when your game emits a "goal" event:

await fetch('https://api.quadraviz.com/v1/channels/<channel-id>/state', {
  method: 'PATCH',
  headers: {
    Authorization: `Bearer ${process.env.QUADRAVIZ_TOKEN}`,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ scoreA: scoreA + 1 }),
});

That's the whole loop. OBS keeps rendering the browser source, the browser source keeps reading from the channel, the channel updates the second you (or your script) pushes new state.

#Common problems and fixes

The scoreboard doesn't show up at all in OBS. Check the URL is exactly what the dashboard gave you. Right-click the source → Refresh cache of current page.

It shows up but doesn't update. The browser source might have lost its connection. Right-click → Refresh. If it still doesn't update, check that your channel is set to Live in the dashboard.

The graphics look blurry. Your canvas resolution doesn't match the browser source resolution. Set the source to 1920×1080 and OBS canvas to 1920×1080 too.

There's a flash when I switch scenes. Uncheck Shutdown source when not visible on the browser source. The trade-off: the source stays connected even when hidden, which uses slightly more CPU but eliminates the reload flash.

My laptop fan is screaming. A browser source is essentially a Chromium tab. If you have an old machine, drop the canvas to 1280×720 or upgrade your hardware. There is no magic CPU-free setting.

#Doing this with Quadraviz

The steps above work with any tool that exposes a browser-source URL — that's the point of the standard. Quadraviz makes a few things easier:

Sub-200ms updates so the score is on screen the same moment you press the button.
Free tier with one channel and a watermark — enough to run a live scoreboard end to end.
Rive-native scenes for smooth animations without writing CSS.

If you want to try the exact flow in this guide, start a free Quadraviz account and follow steps 1 through 4. It takes about five minutes.

Quick start — the broader Quadraviz onboarding.
Channels — how channels, scenes, and live controllers fit together.
Quadraviz vs Singular.live — if you're comparing OBS scoreboard tools for a bigger production.