How to Add a Live Scoreboard to OBS Using a Browser Source

If you have ever watched a fighting game tournament, a charity stream, or a community game night and wondered how the host keeps a live scoreboard on screen, the answer is almost always a browser source. OBS Studio (and tools like Streamlabs, XSplit, and vMix) can embed any web page directly into your scene. Point it at a live scoreboard URL, and your viewers see scores update in real time without you ever touching OBS mid-stream.

In this guide we will walk through the entire workflow: creating a scoreboard, grabbing the view link, adding it to OBS as a browser source, and updating scores live from your phone or a second device while you broadcast.

What is a browser source scoreboard?

A browser source is an OBS feature that renders a web page inside your scene, just like a webcam feed or a game capture. Any URL works, but the magic happens when the page updates itself without a refresh. That is exactly what MakeTheBoard does. Every scoreboard has a public view link that streams changes over a WebSocket connection. When you change a score on your dashboard, viewers watching through OBS see it move instantly.

Streamers use this for:

• Tournament brackets and match scores during fighting game, Smash, or FPS events
• Donation goal trackers that tick up as contributions come in
• Viewer challenge boards where chat participants earn points
• Charity marathon leaderboards tracking team totals across a multi-day event
• Game night scoreboards for party games, trivia, or Mario Kart leagues

The advantage over a static image overlay is obvious: you do not have to edit a graphic and swap it out every time the score changes. The page handles everything.

Step 1: Create your scoreboard and get a view link

Before you open OBS, you need a board.

1. Go to MakeTheBoard and sign up for a free account.
2. From your dashboard, click New Board and choose either Scoreboard or Leaderboard depending on your use case. A scoreboard works well for head-to-head matches. A leaderboard works better for ranked lists with many competitors.
3. Add your players or teams and set starting scores.
4. Customize the look. Pick colors that work against your stream layout. If your OBS scene has a dark background, use a dark board theme so it blends in. You can also upload a logo if you are running a branded event.
5. Click the Share button on the board's control panel to get the public view link. It looks something like https://maketheboard.com/board/abc123. Copy this URL. You will paste it into OBS in the next step.

If you need help with any of these steps, the Getting Started guide covers board creation and display options in detail.

Step 2: Add it to OBS as a browser source

Open OBS Studio and go to the scene where you want the scoreboard to appear.

1. In the Sources panel, click the + button and select Browser.
2. Give it a name like "Scoreboard" and click OK.
3. In the properties window, paste your MakeTheBoard view link into the URL field.
4. Set the Width and Height. Recommended starting values depend on how you want to use the board:

Use case	Width	Height	Notes
Full-width bar across the bottom	1920	200	Crop or resize in OBS after adding
Side panel	480	720	Works well docked to the left or right
Small corner overlay	400	300	Scale down in the scene as needed
Full scene (intermission screen)	1920	1080	Shows the entire board between matches

5. Leave FPS at 30. The scoreboard is not video, so higher frame rates waste resources.
6. Check Refresh browser when scene becomes active if you switch between multiple scenes. This ensures the WebSocket connection reconnects when you return to the scene.
7. Uncheck Shutdown source when not visible unless you are certain you want the connection dropped between scene switches. Leaving it running is generally safer for real-time updates.
8. Click OK.

You should now see the board rendered in your scene. Use the red bounding box handles to resize and position it where you want it.

A note on transparency

MakeTheBoard renders a full-page scoreboard with a background color. It is not a transparent overlay widget. That means you will see the board's background in your OBS scene. This is intentional: the board is designed to be readable and visually complete on its own.

If you want to minimize visual weight, set your board's background color to match your scene's background, or use a dark theme on a dark scene. You can also crop the browser source in OBS (hold Alt and drag an edge) to show only the portion of the board you need, like the top three players.

For streamers who specifically need a fully transparent overlay with floating text and no background, that is a different type of tool (usually a custom HTML/CSS widget). MakeTheBoard is built for full-screen display, which makes it ideal for intermission screens, dedicated scoreboard scenes, and side panels where a solid background is fine.

Step 3: Update scores live from your phone

Here is where the workflow gets powerful. You do not need to alt-tab out of your game to update scores.

1. On your phone, tablet, or any second device, go to MakeTheBoard and log in to your account.
2. Open the same board from your dashboard.
3. Tap a player's score to change it. The update pushes to the view link instantly over a WebSocket connection.

Your OBS browser source picks up the change in real time. Your viewers see the score update without any action on your streaming PC. No refresh, no scene switch, no hotkey. Just tap the new score on your phone and keep playing.

This "remote scorekeeper" workflow is especially useful for:

• Solo streamers who are also the player. Keep your phone on your desk and tap between rounds.
• Tournament organizers who hand score duties to a volunteer. Share your account or give them access to the board, and they update from their own device.
• Duo streams where one person plays and the other manages production. The producer updates scores from a laptop while the player focuses on the game.

If you are on a Premium or Team plan, you can also set up multiple scorekeepers on the same board for larger events.

Troubleshooting checklist

Browser sources are generally reliable, but a few things can go wrong. Here is a checklist for the most common issues.

The browser source is blank or shows a white rectangle

• Check the URL. Make sure you pasted the full view link, not the dashboard edit URL. The view link is the one you get from the Share button.
• Check your internet connection. The browser source needs to reach maketheboard.com to load. If your streaming PC is on a restricted network (hotel Wi-Fi, corporate firewall), the connection might be blocked.
• Refresh the source. Right-click the browser source in OBS and select Refresh. If the page loaded before the WebSocket connected, a refresh usually fixes it.
• Restart OBS. Occasionally the Chromium Embedded Framework (CEF) that OBS uses for browser sources gets stuck. A full restart clears it.

The board looks cut off or the wrong size

• Adjust Width and Height in source properties. The browser source renders at the pixel dimensions you specify. If the board looks cropped, increase the width or height.
• Use Transform > Fit to Screen. Right-click the source, go to Transform, and select Fit to Screen to scale it to your canvas without cropping.
• Crop instead of scale. Hold Alt and drag an edge of the source in the scene to crop out parts you do not need, like extra whitespace below the last player.

Scores are not updating in real time

• Check that "Shutdown source when not visible" is unchecked. If this is on, OBS kills the browser page when you switch scenes, and the WebSocket disconnects.
• Disable browser source caching. In the browser source properties, add ?nocache=1 to the end of the URL. Some OBS versions aggressively cache the initial page load. The query parameter forces a fresh load without affecting functionality.
• Check the Custom CSS field. By default OBS adds some CSS to browser sources. Make sure no custom CSS is overriding the board's styles. If in doubt, clear the Custom CSS field entirely.

The board loads but looks blurry

• Match the source dimensions to your canvas. If your canvas is 1920x1080 and you set the browser source to 800x600 then scale it up, it will look soft. Set the browser source to the actual pixel size you want it displayed at, or larger, and scale down.

Alternatives and limitations

MakeTheBoard is one way to get a scoreboard into OBS, but it is worth understanding the tradeoffs.

Full-screen board vs. transparent overlay widget: MakeTheBoard gives you a complete scoreboard with background, colors, and layout. It is not a transparent floating widget. If you need individual score counters that float over gameplay footage with no background at all, you will want a custom HTML overlay or a tool like StreamElements custom widgets. If you want a polished, self-contained scoreboard that works as a scene, a panel, or a cropped bar, MakeTheBoard is a strong fit.

Static image vs. live URL: Some streamers create scoreboards as images in Photoshop or Canva and swap them manually. This works for events where scores rarely change, but it falls apart during fast-paced matches. A live URL source saves you from constantly alt-tabbing to update graphics.

Spreadsheet embeds: You could embed a Google Sheet, but it refreshes on a polling interval (not real time), looks like a spreadsheet (because it is one), and requires fiddling with embed parameters to size correctly. MakeTheBoard is purpose-built for display.

FAQ

Does this work with Streamlabs Desktop (formerly Streamlabs OBS)?

Yes. Streamlabs Desktop supports browser sources the same way OBS Studio does. The process is identical: add a browser source, paste the URL, set width and height, done. Everything in this guide applies to Streamlabs.

What about vMix or XSplit?

Both support web browser inputs. In vMix, add a Web Browser input and paste the URL. In XSplit, add a Webpage source. The scoreboard renders the same way since it is just a web page. Real-time updates work in any tool that keeps the page loaded and allows WebSocket connections.

Will the browser source slow down my stream?

Unlikely. The scoreboard is a lightweight HTML page, not a video. It uses minimal CPU and memory. The WebSocket connection sends tiny JSON messages only when a score changes, so network overhead is negligible. If you are already running a game, a webcam, and alerts, the scoreboard will not be the thing that causes dropped frames.

Can I use multiple scoreboards in the same scene?

Yes. Add multiple browser sources, each pointing to a different board URL. This is useful for multi-game events where you want separate boards for different titles or divisions. Just be mindful of scene layout so they do not overlap.

How many players or teams can I put on a board?

The free plan supports up to 25 entries per board, which covers most streaming use cases. Premium and Team plans support more entries for larger tournaments. Check the pricing page for current limits.

Can viewers see the scoreboard outside of my stream?

Yes. The view link is a public URL. You can share it in your stream description, Discord server, or social media so viewers can pull it up on a second screen. They will see the same real-time updates.

Do I need to keep my dashboard open for the browser source to work?

No. Once the board is created, the view link works independently. You can close your dashboard, close the browser on your streaming PC, or even shut down the device you used to create the board. The OBS browser source connects directly to the view URL. You only need your dashboard (or the mobile view) open when you want to change scores.

Get started

Setting up a live scoreboard in OBS takes about two minutes: create a board, copy the link, paste it into a browser source. From there, you can update scores from your phone while you play, and your viewers see every change the moment it happens.

Create your free scoreboard and drop it into your next stream.