How to add live graphics to vMix with a browser source

vMix ships with a capable title system, so "browser graphics in vMix" sounds redundant — until the first show where a scorekeeper, a stats feed, and an operator all need to touch the same graphic at once. A browser-source overlay is a small live web page that renders your graphics and redraws itself the moment the data behind it changes. vMix just keeps compositing the input; the page does the work.

This guide walks through the whole setup. The example uses Quadraviz for the graphics and data layer, but the vMix technique itself works with any tool that serves a browser-source URL. If you're on OBS instead, we have a separate guide for that.

#Why a browser overlay instead of vMix titles

vMix's GT titles are genuinely good at what they do: name straps and static-ish graphics driven from a data source, rendered locally. Where they run out of road:

Animation freedom. GT animations are presets on text and images. A browser overlay renders whatever the page renders — in our case Rive vector animation at 60 fps: springy score pops, staggered leaderboard rows, animated stingers between states.
Remote operation. Titles are edited on the vMix machine. A browser overlay is driven from a dashboard anywhere — your scorekeeper can be at the venue scoring table while vMix runs in the OB van or the office.
One graphics package, every encoder. The same URL drops into vMix today, OBS tomorrow, and a colleague's Streamlabs on the weekend. No rebuilding titles per tool.
Data does the typing. Wire the overlay to your scoring system, a feed, or a spreadsheet once, and the on-screen values track reality instead of someone's typing speed.

The trade-off is a Chromium instance per browser input — worth knowing about, covered in "Common problems" below.

#Prerequisites

vMix 27 or newer. The Web Browser input is built into every edition, and recent versions handle transparent backgrounds properly.
A live-graphics tool that gives you a browser-source URL. We'll use Quadraviz, which has a free tier.
Ideally, a second device for the control dashboard. vMix machines earn their keep encoding; drive the graphics from another laptop or tablet.

#Step 1 — Create the channel and stage a scene

In Quadraviz, a channel is the live endpoint vMix connects to. One channel maps to one browser input, and every channel has a preview side and a live side — you stage a scene in preview, check it, then push it live.

Sign in at the dashboard.
Click New channel and name it after the output — "Program graphics" works.
Open the Scenes library and pick a starting point: a two-team scoreboard, a lower third, or a full match package.
Load the scene into preview, confirm it looks right, then push it to live.

The dashboard now shows the scene's live controls — team names, scores, clock, whatever the scene exposes.

#Step 2 — Copy the browser source URL

In the channel header, click Get URL and copy it. It looks like:

https://controller.quadraviz.com/render/<your-channel-id>

That URL is the only thing vMix needs. Anyone who has it can view your overlay — treat it like a password.

#Step 3 — Add a Web Browser input in vMix

In vMix:

Click Add Input (bottom-left) → More → Web Browser.
Paste the URL into the URL field.
Set Width to 1920 and Height to 1080 (match your session resolution).
Click OK.

The input appears in your input bar and starts rendering immediately. Give it a proper name — right-click → Rename → Graphics — Quadraviz — you'll thank yourself at 10 pm mid-show.

#Step 4 — Put it on an overlay channel

This is the part that differs from OBS. In OBS you stack sources inside a scene; in vMix, graphics live on overlay channels that composite on top of whatever is in program.

On the browser input's thumbnail, click the 1 (overlay channel 1) button — or right-click it and choose the overlay number you want.
The overlay fades in over program, with transparency, on top of your cameras.

Because the scene background is transparent, only the graphic itself shows. Clicking the overlay number again animates it out — that's your in/out control at the vMix end, though in practice you'll fire graphics in and out from the Quadraviz control panel and just leave the overlay on.

Standard positioning conventions apply: score bug top of frame for traditional sports, bottom for esports, lower thirds in the lower third.

#Step 5 — Test the live update

The moment of truth. With the overlay live in vMix:

In the Quadraviz dashboard, change Score A from 0 to 1.
Watch your program output.

The score should tick over, animated, in well under a second. If it does, you're wired up. If not, jump to "Common problems."

#Step 6 — Let the data do the typing (optional)

Typing scores by hand works for a friendly. For anything faster, connect the channel to your data: Quadraviz can poll an API, receive webhooks from your scoring system, or read a Google Sheet your scorekeeper edits — and push every change straight into the graphic. The setup is the same wiring board you used for the scene; no code involved.

We covered the patterns (and when to use which) in How to automate your stream overlays with live match data.

#Common problems and fixes

The overlay has a black background instead of transparency. You're on an older vMix build whose browser input doesn't composite alpha. Update vMix (27+). As a stopgap, add a Colour Key filter on the input keyed to black — but updating is the real fix.

The graphic shows but doesn't update. The input may have lost its connection. Right-click the input → Refresh. Also confirm the channel is actually live in the dashboard — a scene sitting in preview doesn't broadcast.

The graphics look soft or blurry. The input resolution doesn't match your session. Set the Web Browser input to the same resolution as your vMix session (e.g. both 1920×1080), and make sure vMix isn't scaling the input up.

Overlay animates in with a delay after clicking the overlay number. vMix keeps browser inputs rendering even when not overlaid, so this usually isn't the browser warming up — check your overlay transition duration in Settings → Overlays.

CPU is higher than expected. Each Web Browser input is a Chromium instance. One overlay channel fed by one input that contains your whole graphics package (scoreboard + lower thirds + ticker as one scene stack) is far cheaper than four separate browser inputs. Consolidate.

#Doing this with Quadraviz

Everything above works with any tool that serves a browser-source URL. What Quadraviz adds on top:

Preview before air. Stage the next look on the channel's preview side and push it live when ready — the same discipline vMix gives your video, applied to graphics.
Sub-200ms updates from dashboard (or data feed) to program output.
Rive-native animation — designers ship real motion design, not preset transitions.
Free tier with one channel and a watermark, enough to run this entire guide end to end.

Start a free account and you can have a live graphic over your vMix program in about five minutes.

How to add a live scoreboard to OBS — the same technique for OBS Studio.
Set up the Live Controller — how channels, preview, and live fit together.
Quadraviz vs LIGR — if you're comparing tools for sports production in vMix.