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

# Getting Started with Vision

> Create your first Twitch stream overlay in minutes. Step-by-step guide to setting up widgets and overlays in OBS.

## Welcome to Vision

Vision is a platform for creating custom stream overlays, alerts, and interactive features. Whether you're tracking scores, displaying chat, running quiz shows, or managing tournaments, Vision makes it easy to enhance your stream.

### Account Tiers

Vision offers different tiers to fit your needs:

| Tier      | What You Get                                            |
| --------- | ------------------------------------------------------- |
| **Free**  | Widgets (single-layer elements with select layer types) |
| **Basic** | Full overlays with multiple layers and more layer types |
| **Pro**   | All features including advanced integrations            |

**Widgets** are perfect for getting started - they're single-layer elements you can quickly add to your stream. **Overlays** let you combine multiple layers into complex compositions.

***

## Creating Your First Widget (Free)

<Steps>
  <Step title="Sign in">
    Go to [app.1up.vision](https://app.1up.vision) and sign in with your Twitch account
  </Step>

  <Step title="Go to Widgets">
    In the sidebar, click on **Widgets**
  </Step>

  <Step title="Create a widget">
    Click **Create Widget** and choose a widget type (e.g., Chat, Counter, Timer)
  </Step>

  <Step title="Customize">
    Adjust the settings, colors, and fonts to match your stream's style
  </Step>

  <Step title="Copy the URL">
    Copy the widget URL and add it as a **Browser Source** in OBS
  </Step>
</Steps>

***

## Creating Your First Overlay (Basic/Pro)

<Steps>
  <Step title="Sign in">
    Go to [app.1up.vision](https://app.1up.vision) and sign in with your Twitch account
  </Step>

  <Step title="Go to Overlays">
    In the sidebar, click on **Overlays**
  </Step>

  <Step title="Create an overlay">
    Click **Create Overlay**, give it a name, and set the dimensions (e.g., 1920x1080 for 1080p)
  </Step>

  <Step title="Add layers">
    Click the **+** button to add layers like Chat, Counters, Timers, or Camera feeds
  </Step>

  <Step title="Position and style">
    Drag layers to position them, resize as needed, and customize colors and fonts
  </Step>

  <Step title="Save and connect">
    Save your overlay and copy the URL to add as a **Browser Source** in OBS
  </Step>
</Steps>

***

## Connecting to OBS

<Steps>
  <Step title="Open OBS">
    Launch OBS Studio on your computer
  </Step>

  <Step title="Add Browser Source">
    In your scene, click **+** under Sources and select **Browser**
  </Step>

  <Step title="Paste the URL">
    Paste your Vision widget or overlay URL into the URL field
  </Step>

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

  <Step title="Done">
    Click OK - your Vision overlay is now live in OBS
  </Step>
</Steps>

<Tip>
  Enable **Live Sync** in Vision to see changes update in OBS in real-time without refreshing the browser source.
</Tip>

***

## Next Steps

Now that you have your first overlay set up, explore these features:

* **[Counters](/counters/index)** - Track deaths, wins, or any score
* **[Timers](/timers/index)** - Add countdowns or stopwatches
* **[Chat](/chat/index)** - Display Twitch chat on your stream
* **[Calls](/calls/index)** - Add guest cameras to your overlay

Want to run interactive events? Check out:

* **[Quiz Shows](/events/quizshows)** - Host trivia with your community
* **[Tournaments](/events/tournaments)** - Manage competitive brackets