Browser sources are one of the most useful parts of OBS because they let a live webpage become part of your scene. Alerts, chat boxes, recent follower widgets, countdowns, donation goals, and many custom overlays all rely on them.
They are also one of the easiest ways to make a scene unstable if you add too many or size them badly.
What a browser source is
A browser source is an embedded web page inside OBS. Instead of loading a PNG or video file, OBS loads a URL and displays the result as part of the scene.
That means a browser source can update live without you replacing files manually. It also means OBS is effectively running a mini browser window in the background.
Common things browser sources power
You will most often use them for:
- alerts
- on-stream chat boxes
- donation goals
- recent activity widgets
- custom overlays built by a service or designer
- countdowns or simple web tools
If the element depends on live data, there is a good chance it belongs in a browser source.
Add one the right way
In OBS:
- go to the Sources panel
- click the plus button
- choose Browser
- give it a clear name
- paste the widget or page URL
Then set width and height deliberately. Do not just accept the defaults. The source should match the size the widget expects, not the size of your whole canvas unless it is designed for full-screen use.
Size and crop matter
A lot of strange browser-source issues are really layout issues.
Examples:
- a small alert widget inside a huge 1920 by 1080 source wastes resources
- a chat box that looks cut off often needs different source dimensions, not a different theme
- tiny text usually means the browser source is being scaled down too hard in the scene
It is usually better to size the source close to the final display size, then make small adjustments inside OBS.
Use local files only when you understand the trade-off
Some advanced overlays use a local HTML file instead of a hosted widget. That gives you more control, but it also means you are responsible for the files, fonts, scripts, and any updates.
Hosted widgets are simpler for most streamers. Local browser sources make more sense when you or a designer built something custom and you need that exact behaviour.
Manage performance from the start
Browser sources are heavier than static image sources. A few good habits keep them from becoming a quiet CPU drain:
- tick the option that turns the source off when hidden
- avoid duplicate sources that do the same job
- refresh only when needed
- keep animated widgets to a sensible minimum
One clean browser source is rarely a problem. Several full-screen animated ones at once can become one.
Know when to interact with the page
OBS lets you interact with a browser source directly. Right-click the source and choose Interact if the page needs clicks or text input.
This is useful for:
- logging in to a widget page
- testing interactive overlays
- confirming a page is loading properly
If the source looks blank, the Interact window is often the fastest way to see whether the problem is the page itself or just the way it is displayed.
Reuse sources carefully across scenes
If the same widget should appear in multiple scenes, reference the existing source rather than creating new copies with the same URL. That reduces setup drift and makes later edits easier.
Separate copies only make sense when the same page needs different sizes, positions, or visibility rules in different scenes.
Troubleshooting basics
When a browser source fails, check these in order:
- is the URL still correct?
- does the page load in a normal browser?
- did the service log you out?
- is the width and height wrong for the widget?
- is another source covering it?
Most problems land in one of those buckets.
Use them for live information, not everything
Browser sources are brilliant when the content needs to change during the stream. They are wasteful when a static file would do the job better.
That is the easiest rule to remember. If the element needs live data, browser source. If it does not, choose the lighter source type and keep the scene simpler.