OBS Browser Source Setup

Overview

VMSC serves your overlays on a local web server, which means any application that supports browser sources can display them. OBS Studio is the most common choice. This guide walks through each step from creating the overlay to seeing it live in your scene.

Step 1 — Create an Overlay in VMSC

If you have not already built an overlay, open VMSC and navigate to the Overlays page. Click New Overlay, give it a name, and add one or more widgets (text, images, event feeds, goal trackers, etc.). Save the overlay when you are happy with the layout.

Each overlay is assigned its own URL automatically. You do not need to configure networking or ports — VMSC handles this on startup.

Step 2 — Copy the Browser Source URL

In the Overlay Editor, look for the Copy Browser Source URL button in the toolbar. Click it to copy the URL to your clipboard. The URL follows this format:

http://localhost:7890/overlay/<overlay-id>

Keep this URL handy — you will paste it into OBS in the next step.

Step 3 — Add a Browser Source in OBS

Open OBS Studio and select the scene where you want the overlay to appear.

1. In the Sources panel, click the + button.
2. Choose Browser from the list.
3. Give the source a recognizable name such as "VMSC Overlay" and click OK.

Step 4 — Configure the Browser Source

In the browser source properties dialog, apply these settings:

Make sure the width and height match your canvas resolution. If you stream at 1280×720, use those values instead.

Step 5 — Enable "Shutdown Source When Not Visible"

Still in the browser source properties, scroll down and check the box labeled Shutdown source when not visible. This tells OBS to unload the browser page when you switch to a scene that does not include this source, freeing memory and preventing unnecessary WebSocket connections.

Optionally, also enable Refresh browser when scene becomes active so the overlay reconnects cleanly each time.

Custom CSS for Transparency

By default, OBS browser sources have a white background. To make the overlay background transparent so only your widgets are visible, add this to the Custom CSS field in the browser source properties:

body {
  background: transparent;
}

VMSC overlays already set a transparent background, but adding this rule ensures OBS does not paint a fallback color behind the page.

Troubleshooting

Blank or White Screen

• Confirm VMSC is running. The overlay server only starts when the application is open.
• Verify the URL is correct — open it in a regular browser to check. You should see your widgets rendered on a transparent page.
• Make sure no firewall is blocking port 7890 on localhost.
• Try clicking Refresh cache of current page in the OBS browser source properties.

Wrong Resolution or Cropped Widgets

• Double-check that the browser source width and height match your OBS canvas resolution.
• Avoid using the red resize handles on the source in OBS — this scales the page rather than changing the viewport. Right-click the source and choose Reset Transform if the overlay appears stretched or cropped.
• In VMSC, make sure your overlay canvas size matches the values you entered in OBS.