How to Add a Free OBS Scoreboard Overlay in 2026 (Without Plugins)

Manually updating scores on your stream by editing a text source in OBS is slow, prone to errors, and pulls your focus away from the action. For any serious broadcast, you need a dynamic solution. This guide will teach you how to create and implement a free **OBS scoreboard overlay** using only a browser source, with no plugins required. You will learn the basic web principles to build your own live-updating scorebug and see how it can be controlled from anywhere. We'll then show you how to graduate from this manual approach to a fully automated system using a professional tool like HUDrift, giving your stream the polish of a major tournament broadcast.

What is a Browser Source Scoreboard and Why Use One?

At its core, the 'Browser' source in OBS Studio is a fully functional web browser integrated into your scene. While many streamers use it to display alerts or chat boxes, its real power lies in its ability to render any custom web page. Instead of pointing it to a static image file for your scoreboard, you point it to a local HTML file or a live URL. This webpage contains the visual elements of your scoreboard—team names, scores, logos, timers—all structured with HTML and styled with CSS.

The primary advantage is the separation of data and presentation. Your OBS scene simply displays the webpage; the score updates happen within the webpage itself. This means you can change the score without ever touching your OBS window during a live game, preventing accidental scene switches or source misclicks. You could have a simple control panel open on a second monitor, a tablet, or even your phone that updates the score, and OBS will reflect it instantly. This method is inherently more stable than relying on third-party plugins, which can break after an OBS update or be abandoned by their developers.

Maintaining high production quality is more important than ever for audience retention, especially with platforms constantly refining their content discovery systems. For instance, recent reports on YouTube's proposed algorithm changes in the UK underscore the need for creators to produce compelling, professional content to stand out. A crisp, responsive scoreboard is a fundamental element of a professional esports broadcast that viewers have come to expect. It shows you respect the competition and the viewer's time, providing critical information at a glance without distracting from the gameplay.

Building Your Basic HTML/CSS OBS Scoreboard Overlay

Creating your own scoreboard overlay requires a basic understanding of HTML, CSS, and a tiny bit of JavaScript. You don't need to be a web developer; you just need to edit a single text file. Start by creating a file named `scoreboard.html` on your computer. Inside, you'll structure the scoreboard using simple HTML tags. Think of these as the building blocks. You'll want a main container `<div>` that holds everything. Inside that, you'll have separate `<div>` elements for each piece of information: one for the home team's name, one for their score, one for the away team's name, and one for their score. Give each of these elements a unique ID, like `id="teamAName"` or `id="teamBScore"`. This is crucial for updating them later with JavaScript.

Next comes the styling with CSS, which you can write directly into your HTML file inside `<style>` tags. This is where you define the look and feel. To position your scoreboard, you can give the main container `position: absolute;` and then use `top: 20px;` and `left: 20px;` to place it in the top-left corner of your broadcast. Use `font-family` to choose a clean, readable font like 'Roboto' or 'Montserrat' (you can import these from Google Fonts). Set `color: white;` for the text. For the background, you can use a semi-transparent black for a modern look: `background-color: rgba(0, 0, 0, 0.7);`. To arrange the team names and scores neatly, CSS Flexbox is your best tool. By setting `display: flex;` and `align-items: center;` on the containers for each team, you can ensure their name and score are perfectly centered vertically. You can add padding to give the text some breathing room and `border-radius` to give the scoreboard rounded corners.

The 'live' functionality comes from a small amount of JavaScript. The simplest method for manual control involves using URL parameters. Your JavaScript code, placed in `<script>` tags at the bottom of your HTML file, will read these parameters from the URL and update the scoreboard. The script will look for parameters like `?teamA=FaZe&scoreA=13&teamB=NIP&scoreB=9`. It will then find the HTML element with `id="teamAName"` and set its content to 'FaZe', find the element with `id="teamBScore"` and set its content to '9', and so on. This means to update the score, you aren't editing the file itself, but rather the URL you are loading in the OBS browser source properties. This is a significant step up from editing text files directly.

To make this even more practical, you can create another simple HTML file called `controller.html`. This page would have input fields for each team's name and score, and buttons to increment or decrement the scores. The JavaScript on this controller page would simply construct the URL with the correct parameters (`scoreboard.html?teamA=...`) and open it. While this still requires manual input, it provides a user-friendly interface for a dedicated scorekeeper to use on a separate device, completely independent of the main OBS production machine. This two-file system—one for display, one for control—is the foundation of many web-based broadcast graphics systems.

How to Add Your Custom OBS Scoreboard Overlay to a Scene

Once you have your `scoreboard.html` file ready, integrating it into OBS Studio is straightforward. The process uses the built-in Browser Source, so no external plugins are needed. This ensures maximum compatibility and stability, as it relies on core OBS functionality that is well-maintained. Follow these exact steps to add your custom overlay to your game scene.

• Select the OBS scene you want to add the scoreboard to (e.g., 'CS2 Match').
• In the 'Sources' dock at the bottom of the OBS window, click the '+' icon and choose 'Browser' from the list.
• A dialog box will appear. Give your source a descriptive name like 'Live Scorebug' and click 'OK'.
• In the 'Properties' window that appears next, check the box labeled 'Local file'.
• Click the 'Browse' button and navigate to where you saved your `scoreboard.html` file. Select it.
• Set the 'Width' and 'Height' to match the full resolution of your canvas, typically 1920 and 1080 for a standard 1080p stream. Your CSS positioning will handle placing the scoreboard correctly within this canvas.
• Scroll down to the 'Custom CSS' text box. It's crucial to add `body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }` here. This code ensures that the background of your HTML page is transparent, so only your scoreboard elements are visible over your game feed.
• Click 'OK' to close the properties. Your scoreboard will now appear in your scene preview. You can click and drag it to fine-tune the position or resize the source box if needed.

To update the score using the URL parameter method described earlier, you will need to re-open the source's properties. Double-click on the 'Live Scorebug' source in your source list. Uncheck 'Local file'. Now, in the 'URL' field, you will enter the path to your file with the parameters. It would look something like this: `file:///C:/Users/YourUser/Documents/OBS/scoreboard.html?scoreA=1&scoreB=0`. When a team scores, you go back into these properties, change `scoreA=1` to `scoreA=2`, and click 'OK'. OBS will reload the source with the new data. For more detailed information on configuring browser sources, the official OBS Project documentation is an excellent resource.

Automating Score Updates with HUDrift for Professional Broadcasts

The DIY method is an excellent way to understand the technology, but for a fast-paced game like Valorant or CS2, manual updates are a liability. A single missed round or a typo can undermine your credibility. This is the point where you should move to an automated system. HUDrift is designed to solve this exact problem by connecting directly to the game's data feed, providing a truly automated **OBS scoreboard overlay** that requires zero manual input during a match.

The workflow is vastly simplified. Instead of building your own HTML files, you choose from a library of professionally designed and tested broadcast overlays in your HUDrift dashboard. These are designed for specific games, with elements for scores, player stats, utility usage, and more. After customizing the overlay with your tournament or stream's branding, HUDrift generates a single, unique browser source URL for you. You copy this URL.

You then follow the same process in OBS: add a Browser source, but instead of selecting a local file, you paste this one URL into the 'URL' field. That's it. When you are broadcasting a connected match, HUDrift's servers receive live game state integration (GSI) data from the game. As rounds are won, players get kills, or the bomb is planted, HUDrift automatically updates the graphics being rendered at that URL. Your OBS overlay updates in real-time with no action required from you. This is how major tournament organizers broadcast multiple concurrent matches, like those in the recent XSE Pro League featuring teams like FaZe and NIP, without needing a dozen producers manually typing in scores.

Managing Tournament Players and Communication

A professional broadcast is more than just the on-screen graphics; it's also about the behind-the-scenes organization. Managing player check-ins, distributing match information, and handling disputes can be chaotic, especially in a large Discord server. Automating communication is just as important as automating your scoreboard. This is another area where a unified platform provides significant advantages over a collection of separate tools and manual processes.

HUDrift integrates tournament administration directly into its system using Discord for communication. When you set up an event on the platform, players sign up and are prompted to connect their Discord accounts. This link is key to the automation. Once a player successfully registers, HUDrift's bot immediately sends them a direct message confirming their entry into the tournament. This eliminates any ambiguity about whether their registration was successful.

The pre-match process is also streamlined. Approximately one hour before the tournament's scheduled start time, every registered player receives another DM containing a unique check-in link. This prevents the classic 'check-in is now open!' ping in a crowded channel where it can easily be missed. Once the check-in window closes and the tournament organizer seeds the bracket, the final piece of automation occurs: each player in the first round receives a new DM that explicitly tells them who their opponent is and which server to join. This targeted, individual communication ensures every participant has the correct information, drastically reducing match delays and admin overhead. If you're looking to run smoother events, explore our tournament management features.

While a custom scoreboard is a powerful visual upgrade, integrating it with a system that also handles the logistical side of a competition creates a seamless experience for both players and broadcast staff. You move from being a streamer to being a true tournament organizer. The time you save by not having to manually DM players or update scores can be reinvested into creating better content, engaging with your chat, or planning your next event. By using a single platform for overlays and administration, you ensure consistency and professionalism from start to finish.

Building an OBS scoreboard overlay from scratch is a valuable exercise that teaches you the fundamentals of browser-based graphics. It's a viable free option for simple use cases. However, as your production ambitions grow, the limitations of manual updating become clear. For reliable, error-free, and professional-looking broadcasts, especially for competitive esports, an automated system is the logical next step. Tools like HUDrift provide the power of a major-league broadcast graphics package with the simplicity of copying and pasting a URL. Elevate your stream beyond the basics and give your audience the quality they deserve. Download HUDrift to get started with automated overlays for your next broadcast.