# OBS browser source

Every browser source setting that matters for a PX Studio overlay, plus audio, refresh, docks, Studio Mode and scaling in OBS.

OBS shows web pages through the **Browser** source, a built-in web browser (based on Chromium) that renders a page straight into your scene. Your PX Studio overlay is such a page. This page explains the OBS side; the short setup is in [Add to OBS](/docs/add-to-obs).

## Add the source

::: steps
In PX Studio, copy your overlay link with **Add to OBS** → **Copy link** (or **Copy OBS URL** on the **Overlays** page).

In OBS, pick the scene, then **Sources** → **+** → **Browser**. Give the source a name and click **OK**.

In the properties, paste the link into **URL**. Leave **Local file** off.

Set **Width** and **Height** to your overlay resolution (editor: **Canvas resolution**, by default 1920 × 1080). Click **OK**.
:::

You can also drag a link from your web browser into the OBS window; OBS then creates a browser source for it.

## The settings and what PX Studio needs

| OBS setting | What it does | For a PX Studio overlay |
| --- | --- | --- |
| **URL** | The page the source loads | Your OBS link from PX Studio |
| **Width** / **Height** | Size of the page viewport in pixels (OBS default 800 × 600) | Same as your overlay resolution |
| **Use custom frame rate** / **FPS** | Renders the page at a frame rate you choose (default 30 when on) | Leave off |
| **Control audio via OBS** | Sends the page audio into the OBS audio mixer | On, so alert sounds get their own fader |
| **Custom CSS** | Extra styles; the default makes the background transparent and hides scroll bars | Keep the default |
| **Shutdown source when not visible** | Unloads the page when the source is hidden or its scene is not active | Off, so the overlay stays connected |
| **Refresh browser when scene becomes active** | Reloads the page every time you switch to the scene | Off, a reload makes the overlay start over |
| **Page permissions** | How much the page may read or control in OBS | The default is fine |
| **Refresh cache of current page** | Reloads the page right away and fetches its files fresh | Use it when the source looks out of date |

**Set up automatically** in PX Studio creates the source with exactly these choices: your overlay size, **Control audio via OBS** on, **Shutdown source when not visible** off and **Refresh browser when scene becomes active** off.

> [!TIP]
> Widget changes, scene switches and new alerts reach the overlay live. You do not need to refresh the source after editing in PX Studio.

## Refresh and clear the cache

- **Quick refresh**: right-click the source in the **Sources** list and choose **Refresh**.
- **Full reload**: open the source properties and click **Refresh cache of current page**. This also fetches images, fonts and scripts again.
- After **Reset the OBS link** in PX Studio, a refresh is not enough. Paste the new link into **URL**.

## Audio from the overlay

With **Control audio via OBS** turned on, the browser source shows up in the **Audio Mixer** like a microphone or game source. There you can:

- move the fader to set how loud alerts, text to speech and media are on stream,
- click the speaker icon to mute the source,
- open **Edit** → **Advanced Audio Properties** and set **Audio Monitoring** to **Monitor Only (mute output)** (you hear it, viewers do not), **Monitoring Enabled** (you and viewers hear it) or **Monitor Off**.

Monitoring plays through the **Monitoring Device** under **Settings** → **Audio** → **Advanced**. OBS recommends keeping music and alert sounds in the green part of the meter, below your voice.

## Interact with the page

Right-click the source and choose **Interact** to open the page in a small window where you can click and type. You rarely need this for PX Studio, because you control the overlay from the editor, the [Deck](/docs/deck) or a [Stream Deck](/docs/stream-deck).

## Hardware acceleration

Under **Settings** → **Advanced** → **Sources**, OBS has the option **Enable Browser Source Hardware Acceleration**. It lets browser sources render on the graphics card. If browser sources stay black, flicker or freeze on your machine, toggle this option, restart OBS and test again.

## Custom browser docks

A dock is a web page inside the OBS window instead of in your scene. Open **Docks** → **Custom Browser Docks**, enter a **Dock Name** and a URL and click **Apply**. Docks never appear on stream. OBS does not support browser docks on Linux with Wayland. PX Studio does not need a dock to work.

## Scenes and Studio Mode

- Scenes and sources share one name list in OBS, so a source cannot have the same name as a scene.
- One overlay source can be added to several OBS scenes. PX Studio scenes switch inside that one source; see [Scenes](/docs/scenes).
- **Studio Mode** shows two views: **Preview** on the left for editing, **Program** on the right for what viewers see. **Transition** swaps them. Viewers cannot see whether Studio Mode is on.
- Sources higher in the **Sources** list are drawn on top. Keep the overlay above your game or camera.

## Scaling and position

The **Width** and **Height** in the properties set the page size. Dragging the red frame in the preview only scales the finished image. For a sharp overlay, keep the properties at your overlay resolution and scale in the preview.

| Action | Windows | macOS |
| --- | --- | --- |
| Edit Transform (exact position and size) | `kbd:Ctrl+E` | `kbd:Cmd+E` |
| Fit to screen | `kbd:Ctrl+F` | `kbd:Cmd+F` |
| Stretch to screen | `kbd:Ctrl+S` | `kbd:Cmd+S` |
| Center to screen | `kbd:Ctrl+D` | `kbd:Cmd+D` |
| Reset Transform | `kbd:Ctrl+R` | `kbd:Cmd+R` |
| Crop | Hold `kbd:Alt` and drag | Hold `kbd:Option` and drag |

If your OBS **Base (Canvas) Resolution** matches your overlay resolution, **Fit to screen** places the overlay exactly. If you change the base resolution later, OBS needs you to re-align your sources.

## Keep OBS light

Browser sources are among the heavier sources in OBS. OBS recommends using as few as needed and keeping their width and height no larger than necessary. One PX Studio overlay source covers all your widgets, which helps here. Problems and fixes are in [OBS troubleshooting](/docs/obs-troubleshooting).

## Sources

- [obsproject.com/kb/browser-source](https://obsproject.com/kb/browser-source)
- [obsproject.com/kb/sources-guide](https://obsproject.com/kb/sources-guide)
- [obsproject.com/kb/obs-studio-overview](https://obsproject.com/kb/obs-studio-overview)
- [obsproject.com/kb/audio-mixer-guide](https://obsproject.com/kb/audio-mixer-guide)
- [obsproject.com/kb/encoding-performance-troubleshooting](https://obsproject.com/kb/encoding-performance-troubleshooting)
- [obsproject.com/kb/stream-tutorial-2-alerts](https://obsproject.com/kb/stream-tutorial-2-alerts)
- [obsproject.com/wiki/Browser-source-development-and-debugging](https://obsproject.com/wiki/Browser-source-development-and-debugging)
- [github.com/obsproject/obs-browser/blob/master/data/locale/en-US.ini](https://github.com/obsproject/obs-browser/blob/master/data/locale/en-US.ini)
- [github.com/obsproject/obs-studio/blob/master/frontend/data/locale/en-US.ini](https://github.com/obsproject/obs-studio/blob/master/frontend/data/locale/en-US.ini)