Free HTML Graphics for OBS and vMix

Browser-based graphics are ordinary web pages designed to sit over video with a transparent background. They can provide lower thirds, scoreboards, timers, images and maps without a traditional character generator.

If you want to build and operate a package now, QLG — Quick Live Graphics is the free browser-based tool used in the examples below.

What HTML live graphics actually are

An HTML graphic is rendered by a browser engine. OBS calls this a Browser Source; vMix provides a Web Browser input. Both can load a normal URL, and a page with a genuinely transparent canvas can be composited over the programme picture.

The page is only the output surface. A useful live-graphics system also needs a way to prepare content, take it on air, clear it, and recover the intended state when the output reloads.

Important: a transparent web page is compatible with the browser inputs in OBS and vMix. That does not make every graphics service a certified integration, and the real production machine should always be tested before air.

A practical Build → Control → Output workflow

Build: create the graphic, enter the text or data, set colours and position, and save it to the production.
Control: use a compact operator view to TAKE, update or CLEAR graphics without editing the design on air.
Output: load the read-only output URL in OBS Browser Source or a vMix Web Browser input.

QLG separates these jobs. The control page runs in a normal desktop browser while the output page runs inside the production application. Its shared state transport is what allows those separate browser environments to stay in sync.

Which graphics fit this approach?

Lower thirds and status graphics: names, roles, locations and short messages.
Timers: countdowns, count-ups, clocks and simple programme timing.
Scoreboards: compact scores and a reusable match clock.
Images and logos: transparent PNG, JPEG or WebP assets, within the tool's limits.
Maps: a location view with markers when the story needs geographic context.

This is a good fit for small production teams, streamers, event operators and backup workflows. It is not a replacement for every data-driven newsroom or sports-graphics system.

Set up the output safely

Finish one simple graphic and save it to Control.
Copy the generated Browser Source URL. Treat control/write credentials as private; only the output URL belongs in the production application.
Add the URL to OBS Browser Source or a vMix Web Browser input at the intended canvas size.
Confirm that an empty output is fully transparent.
TAKE the graphic, confirm its alpha edges and placement, then CLEAR it.
Reload the browser input and verify that the intended current state recovers.

For the exact OBS property setup, continue with How to Add Browser Source Graphics to OBS.

What to test before a real show

EMPTY, TAKE and CLEAR against the actual programme background.
Output reload and network reconnect while a graphic is intended to be on air.
Text length, safe areas, font rendering and alpha at the final resolution.
Timers and score changes during a realistic operating sequence.
GPU and network behaviour on the production computer, not only on a development laptop.

Build a free graphics package

QLG Free supports lower thirds, status graphics, timers, one scoreboard, images and one map within the limits shown in the tool.

Open QLG — Quick Live Graphics →