OBS · 5 min read
How to add an overlay in OBS (Browser Source)
You have an overlay (or you want to build one) and it needs to show up in your stream. In OBS, everything goes through one specific source type: the Browser Source. Set up properly, it displays any web page on top of your game or camera, in real time. Here is how to configure it cleanly, in five minutes.
Free during the open beta
Before you start
- OBS Studio installed (or any software that accepts Browser Sources)
- Your overlay URL (Twools generates one for you, but the method works for any URL)
- Five minutes before your stream
Step by step
- 01
Understand what a Browser Source is
A Browser Source is a mini web browser embedded in OBS: give it a URL and it renders the page inside your scene. It is the standard for modern overlays, because a web page can be animated, transparent and updated live without touching OBS.
- 02
Add the source to your scene
In the Sources panel, click + and pick Browser. Give it a clear name, for example "Overlay", and confirm. A properties window opens.
- 03
Paste the URL and set the size
Paste your overlay URL into the URL field. Set width and height to your canvas resolution, usually 1920 by 1080. Leave everything else unchecked for now and confirm.
- 04
Check the result
The overlay appears in your scene with a transparent background: only your widgets are visible. If it is misaligned, right-click the source, Transform, then Fit to screen. Keep the source above your game capture in the list (source order controls stacking).
- 05
One URL for the whole overlay
The classic trap: one Browser Source per widget, and ten sources to manage. With Twools, your entire overlay (timer, alerts, chat, goals) lives in a single URL: compose it in the editor, paste once, and every change updates live in OBS without ever reopening the properties.
Watch the demo
The full workflow in real conditions: build the overlay, export it to your streaming software, drive it live. (Video in French.)
Tips
- If nothing shows up, open the source properties and click "Refresh cache of current page".
- Leave "Shutdown source when not visible" unchecked: your timers and alerts keep running between scenes.
- The source size must match the OBS canvas resolution, otherwise the overlay will look blurry or cropped.
FAQ
Does this work with software other than OBS Studio?
Yes. Any streaming software that accepts Browser Sources works the same way: the method and the URL are identical.
Does an overlay slow down the stream?
A well-built Browser Source uses very little. One optimized source is actually lighter than a dozen separate ones.
Why is my overlay not showing?
In order: check the URL (it should open in a normal browser), refresh the cache from the source properties, and make sure the source sits above the others in the list.
Do I have to rebuild the source after every change?
No. The URL never changes: edit your overlay in the editor and the render updates live in OBS.