OBS lower thirds: one browser source, every graphic
OBS Studio can show live HTML5 graphics natively — no plugin, no capture card, no second machine. This is the exact setup for OBS lower thirds, score bugs and tickers using a single transparent browser source, plus the problems people hit and how to fix them.
Why a browser source and not a media source
A media source plays a file. A browser source runs a live web page, composited over your scene with full alpha transparency, updating in real time. That difference is everything for live graphics: the page can change its own contents while it is on air, so a score or a name updates without touching OBS.
It also means one source carries every graphic. The strap, the score bug and the ticker are all elements on the same transparent page, so they cannot drift out of alignment and you never build a stack of a dozen sources.
Adding the source — step by step
- Start LowerThird Software. It serves the control panel and the output page from your own machine.
- In OBS, select the scene that already has your camera or game capture. Click + under Sources and choose Browser.
- Name it Graphics and click OK.
- Set URL to
http://localhost:5275/output. - Set Width 1920 and Height 1080 — match your canvas resolution, do not use the source dialog to resize.
- Leave Shutdown source when not visible unticked, and tick Refresh browser when scene becomes active only if you want the graphics to reset on every scene change.
- Click OK, then drag the source to the top of the list so it sits above the camera.
Transparency: nothing to configure
People often hunt for a transparency setting. There is not one, and there does not need to be — the OBS browser source honours the page’s alpha channel already. If the output page leaves its background unpainted, OBS composites only the drawn pixels over your scene.
If you do see a black or white rectangle, the page is painting a background, not OBS. Custom CSS in the source dialog can fix a third-party page (body { background: transparent !important; }), but a page built for broadcast should already be transparent.
Sizing, scaling and the safe area
Always create the source at the same resolution as your canvas — normally 1920×1080 — and position graphics inside the page rather than scaling the source in OBS. Scaling a browser source resamples text and softens every edge, which is the single most common reason streamed titles look blurry.
If you stream at 1280×720, keep the source at 1920×1080 and let OBS downscale the whole canvas once at the end. One clean downscale beats two scaling passes.
Five problems and their fixes
- The source is blank. The app is not running, or the port is different. Open the URL in a normal browser first — if the page is empty there too, it is the app, not OBS.
- Graphics do not update. The page is cached or the socket dropped. Right-click the source → Interact, or Refresh. A page built on WebSockets should reconnect on its own.
- Titles look soft. The source is being scaled. Reset the transform (Ctrl+R with the source selected) and set the size in the source properties instead.
- Everything stutters. Hardware acceleration is off in OBS, or you are running an expensive animation. Prefer transform and opacity animations, which the GPU handles, over animating width, height or shadows.
- The overlay disappears on scene change. Shutdown source when not visible is ticked. Untick it, or add the same source to every scene as a reference rather than a copy.
Working while you are live
Keep the control panel on a second monitor, or on a tablet on the desk — it is a web page, so anything with a browser on your network can drive it. Type the next guest’s name while the current one is still on screen, then press TAKE when the shot changes.
Because commands travel over a WebSocket, there is no polling delay and no refresh: click, and the animation starts in the same frame.
Ready to try it in your own scene? Get an early-access build, add one browser source, and put a name strap on air in about five minutes.
Get early access