OBS Browser Source Effects: Add Live Effects Without Plugins

A browser source is an OBS source type that renders a web page directly inside your scene. It is the most flexible effect surface OBS has: a page can draw hardware-accelerated WebGL at 60 fps, support real transparency, respond to audio — and it needs no OBS plugins. Everything from chat boxes to alerts to animated overlays runs on browser sources.

How browser sources work

OBS embeds a Chromium-based browser (CEF) and composites whatever the page renders into your scene. You add one via + → Browser and point it either at a URL or — with Local file checked — at an HTML file on your disk. Local files are ideal for overlays: they load instantly, work offline, and never depend on someone else's server staying up.

Two settings matter most:

• Width and height — set them to your canvas size (typically 1920 × 1080) so the page renders at the resolution you stream at.
• Local file — check it when loading a file from disk; the file picker replaces the URL field.

Why browser sources beat video loops for overlays

A video loop is a fixed recording: it seams when it repeats, blurs when scaled, and can never respond to anything happening on your stream. A browser source renders live:

• No loop seams — motion is computed each frame, not replayed.
• Crisp at any resolution — vector and shader graphics scale perfectly.
• Reactive — pages can listen to an audio input and animate to your voice or music.
• Tiny files — an overlay is kilobytes of code instead of hundreds of megabytes of video.

Transparency

Browser sources support alpha: whatever the page leaves transparent, OBS composites over your gameplay. The page has to cooperate by not painting a background. If you build pages by hand, that is a CSS detail you own; overlay files exported from Reactor Studio ship with a transparent background out of the box, including transparent letterbox bars when the source size does not match the scene's aspect ratio.

Making your own effects — without writing the code

Hand-writing WebGL for an overlay is a specialist job. Reactor Studio generates it instead: you add your artwork in the browser, mark zones on the parts that should react, describe the effect in plain language, and an AI writes the GLSL shader. You can generate live controls for the result, tune them, and export a single self-contained HTML file built specifically for OBS — no visible controls, transparent background, autoplay.

From there it is the standard routine: add a browser source, check Local file, select the export, set 1920 × 1080. The step-by-step version, including audio input and virtual audio cables, is in How to Add an Audio-Reactive Overlay to OBS; the visualizer-specific walkthrough is in Audio Visualizer Overlay for OBS.

Frequently asked questions

My browser source shows nothing — what should I check?

The usual fixes: make sure Local file is checked if you are loading a file from disk, set an explicit width and height (for example 1920 × 1080), and click the source's Refresh button after changing the file.

How do I get a transparent background?

The page itself must use a transparent background — OBS then composites it over your scene automatically. Overlays exported from Reactor Studio are transparent by default.

Do browser sources hurt streaming performance?

Each browser source runs an embedded browser, so keep the count reasonable. GPU-rendered content like WebGL shaders is light on the CPU; one self-contained overlay file per scene is a lean setup.

Can a browser source react to my audio?

Yes — a page can request an audio input device and drive its visuals from it. That is how audio-reactive overlays and visualizers work; route music through a virtual audio cable to make effects follow your tracks.