Skip to main content

​
What are Overlays?

Overlays are the foundation of Vision. They’re canvases that hold multiple layers - chat displays, counters, timers, camera feeds, and more - all combined into a single browser source for your stream. Think of an overlay as a transparent layer that sits on top of your stream content, displaying dynamic information and graphics.

​
Creating an Overlay

1

Go to Overlays

In the Vision dashboard, click Overlays in the sidebar
2

Click Create

Click the Create Overlay button
3

Name your overlay

Give your overlay a descriptive name (e.g., “Main Stream Layout”, “Just Chatting Scene”)
4

Set dimensions

Choose your canvas size - typically 1920x1080 for 1080p streams or 2560x1440 for 1440p
5

Start building

Your overlay opens in the editor where you can add layers

​
Managing Overlays

​
Folder Organization

Keep your overlays organized with folders:
  1. Click the folder icon in the overlays list
  2. Create folders for different purposes (e.g., “Gaming”, “IRL”, “Events”)
  3. Drag overlays into folders to organize them

​
Overlay Actions

Right-click an overlay or use the menu to:
  • Rename - Change the overlay name
  • Duplicate - Create a copy of the overlay
  • Delete - Remove the overlay
  • Move to folder - Organize into folders

​
Overlay Settings

Access overlay settings by clicking the gear icon in the editor:

​
Dimensions

  • Width and Height - The canvas size in pixels
  • Match these to your stream resolution for best results

​
Connections

Manage which devices can display this overlay:
  • OBS connections - Browser sources in OBS
  • Browser connections - Direct browser windows
  • Editor - The Vision editor preview
You can block specific connections if needed (useful for preventing duplicate displays).

​
Connecting Overlays to OBS

1

Copy the overlay URL

In the overlay editor, click the share icon or copy the URL from the address bar
2

Add Browser Source in OBS

In OBS, add a new Browser source to your scene
3

Paste the URL

Paste your Vision overlay URL
4

Match dimensions

Set the width and height to match your overlay (e.g., 1920x1080)

​
Live Sync

Enable Live Sync to see changes in OBS instantly:
  1. In the editor, click on Connections in the top bar
  2. Find your OBS connection
  3. Toggle Live Sync on
Now when you edit your overlay, changes appear in OBS without refreshing.

​
Tips

Use multiple overlays for different scenes - a “Starting Soon” overlay, a “Gameplay” overlay, and a “BRB” overlay keep things organized.
Test your overlay by opening the URL directly in a browser before adding it to OBS. This helps you catch any issues early.

​
Next Steps