> ## Documentation Index
> Fetch the complete documentation index at: https://docs.1up.vision/llms.txt
> Use this file to discover all available pages before exploring further.

# Stream Overlays for OBS

> Create custom Twitch overlays with multiple layers. Add chat, counters, timers, and cameras to one OBS browser source.

## 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

<Steps>
  <Step title="Go to Overlays">
    In the Vision dashboard, click **Overlays** in the sidebar
  </Step>

  <Step title="Click Create">
    Click the **Create Overlay** button
  </Step>

  <Step title="Name your overlay">
    Give your overlay a descriptive name (e.g., "Main Stream Layout", "Just Chatting Scene")
  </Step>

  <Step title="Set dimensions">
    Choose your canvas size - typically **1920x1080** for 1080p streams or **2560x1440** for 1440p
  </Step>

  <Step title="Start building">
    Your overlay opens in the editor where you can add layers
  </Step>
</Steps>

***

## 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

<Steps>
  <Step title="Copy the overlay URL">
    In the overlay editor, click the **share icon** or copy the URL from the address bar
  </Step>

  <Step title="Add Browser Source in OBS">
    In OBS, add a new **Browser** source to your scene
  </Step>

  <Step title="Paste the URL">
    Paste your Vision overlay URL
  </Step>

  <Step title="Match dimensions">
    Set the width and height to match your overlay (e.g., 1920x1080)
  </Step>
</Steps>

### 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

<Tip>
  **Use multiple overlays** for different scenes - a "Starting Soon" overlay, a "Gameplay" overlay, and a "BRB" overlay keep things organized.
</Tip>

<Tip>
  **Test your overlay** by opening the URL directly in a browser before adding it to OBS. This helps you catch any issues early.
</Tip>

***

## Next Steps

* **[Connect Stream Deck](/overlays/streamdeck)** for hardware control
* **[Set up Calls](/calls/index)** to add guest cameras