The OBS browser source is one of the most powerful and most misunderstood features in streaming. Here's everything you need to know about using it effectively in 2026.
Add Live Captions via Browser SourceAn OBS browser source is a web browser rendered as a visual layer within OBS Studio. It uses a Chromium-based engine to render any URL as a live, interactive element on your stream. The background is typically transparent, so only the relevant content appears over your stream. Browser sources are how almost every modern streaming overlay works — alerts, chat boxes, countdown timers, and live captions all use browser sources under the hood.
In OBS Studio, click the "+" button in the Sources panel. Select "Browser" from the source types. Give it a name (e.g., "Live Captions"), then enter the URL of the page you want to render. Set width to 1920 and height to 1080 for full-canvas rendering. Check "Shutdown source when not visible" to save performance when captions aren't displayed. Click OK and position the source in your scene.
For streaming overlay tools, you'll want this source at the top of your source stack so it renders above your game capture and webcam layers.
Stream alerts — Follow, sub, and donation alerts from Streamlabs, StreamElements all run as browser sources.
Chat overlays — Displaying your Twitch chat on screen during IRL or mobile streams uses a browser source pointed at a styled chat widget.
Live captions and translation — Tools like StreamTranslate deliver real-time AI captions powered by our industry-leading speech AI directly as an OBS browser source. Paste the URL and your captions appear on stream in any of 125+ languages.
Custom graphics — Designers build animated overlays in HTML/CSS/JavaScript and deliver them as browser sources for maximum visual quality.
Enable "Shutdown source when not visible" for sources you toggle frequently. Use "Refresh cache of current page" (right-click the source) if a browser source seems stuck. Avoid stacking too many browser sources with heavy JavaScript — for most streamers, 3-5 browser sources is a comfortable maximum.
StreamTranslate is specifically designed for OBS browser source integration. Sign up, configure your target language, and receive a browser source URL. Add that URL to OBS as described above. The caption overlay renders transparently, positioned per your preferences, and begins displaying real-time captions within seconds of your stream starting.
Set Up Your Caption OverlayYes. Browser sources can play audio, which is how alert sounds work. For caption overlays, audio output is typically disabled.
Yes. OBS has a "Custom CSS" field in browser source settings that lets you inject CSS into the rendered page.
The page needs to be designed with a transparent background. Most professional overlay tools handle this automatically.
Right-click the browser source in your Sources panel and select "Refresh cache of current page" to force a hard reload.