Browser sources
Publish a frame or element as a live URL, and update it in place without changing the address in OBS.
A browser source is a live page hosted at /o/ followed by a unique token. OBS or Streamlabs Desktop loads this page as a Browser Source. The page is transparent and renders the most recently published version of the project. Stingers cannot be published as browser sources; they are delivered as rendered files. See Frames, stingers, and elements.
The page subscribes to the published document. Selecting Update source writes the current composition to the same token, and any browser source already displaying that URL picks up the change automatically. You do not need to paste a new URL after making changes.
Publish a project
- Open a frame or element project.
- Select Browser source.
- Select Create source the first time. After making changes to layers, colors, reactions, or run mode, select Update source.
- Click the displayed URL to copy it.
If the composition uses Premium features, the panel indicates that the live URL requires Premium, and Create source opens the Premium offer instead of publishing.
In OBS or Streamlabs Desktop, add a Browser Source and paste the URL. Set the source width and height to the composition's pixel dimensions (for example, 1920×1080 for a 16:9 project at 1080p). The page fills the source bounds, so a size mismatch scales the graphic. Leave the custom CSS field empty; the page is already transparent. If you do not need alerts to queue while the scene is inactive, enable OBS's option to shut down the source when not visible.
Frame behavior
A published frame loops continuously. The interior remains transparent, allowing the camera or game capture below it in the scene's source list to show through. Position the browser source above the camera source and size it to the full canvas dimensions rather than to the border thickness. The border is drawn in canvas space, so cropping the browser source also crops the transparent interior.
With Indefinite run, the motion continues without restarting. With Timed run, the duration loops, and motions such as draw or gleam restart visibly at each cycle. Use Timed when that cycle is desired, or when you also need Download matte or Render WebM.
Element behavior
The live page applies three inputs to the published composition, in order: the current now-playing track, the most recent alert, and counter values. Layer triggers read from these inputs. Reactions determine whether the timeline plays.
The following table summarizes playback behavior by configuration:
| Configuration | Idle state | On event |
|---|---|---|
| Alert set to Static, no play reaction | Timeline loops | Bindings update if music or counter data arrives. Playback is not triggered |
| Alert type set, default reactions | Idle | The matching alert plays the element once |
| Play reaction set to Loop | Idle | The element plays and continues looping |
| Run set to Indefinite | Entrance plays once, then holds | Bindings update in place. A play reaction can still replay the element |
The page recognizes the following alert types from Streamlabs:
- Tips — name, amount, message, and a goal value from 0 to 1
- Subscriptions — name, message, tier, months, gift count, and recipient
- Follows and raids — name and count
- Redemptions — name, message, and reward
Text and bar triggers update only when the corresponding alert kind is enabled on that layer. For example, a Donor name trigger with only Tips enabled will not update on a follow.
Connect Streamlabs
Live alerts use the Streamlabs account connected to your profile. To connect, open Account and select Sign in with Streamlabs. The connection is stored with your user account and applied to every browser source you publish or update. Disconnecting from the Account page removes it from all sources.
If you create or update a source for an element that listens for alerts and no Streamlabs account is connected, you are prompted to sign in.
Send a test alert
Test controls are located in the Browser source panel below the URL.
- Create the source so that a token exists.
- Select the alert kind and fill in the sample fields. Defaults are "Alex" for name, "$25" for amount, and "Nice stream" for message.
- Select Send test alert.
The editor plays the same payload that is sent to the live page. If the editor plays but the OBS source does not, the OBS source is using an outdated URL or the source has not been created. If neither plays, the element's Alert type is set to Static or no reaction is configured for that alert kind.
Widgets and Triggers
The Widgets tab on the Projects page lists every published browser source. From a widget card, you can copy the URL, open the project, or open the alert tester and counter controls.
The Triggers tab provides a control surface for published elements. A key is displayed for each play reaction, counter, and music trigger on a published element. Select a key to fire its trigger. Use New set to group projects, and drag keys to reorder them within a set. Keys appear only after an element has been published and has at least one trigger.
A counter key displays the current value and increments it by one when selected. The adjacent panel allows you to set or reset the value. The counter ID is shared between the text layer's Stream Deck counter trigger and the Stream Deck plugin's counter action.
Example: building an alert
- Create a new element at your broadcast aspect ratio.
- Add layers and set text triggers to the fields you want populated. Keep the sample text readable in the preview.
- Set Alert to the event that should play the graphic. Confirm that the Reactions section shows a play row for that event.
- Set Run to Timed for a one-shot lower third, or to Indefinite for a persistent graphic that only updates its values.
- Select Create source, add the URL to OBS at the canvas size, and select Send test alert.
- After changing the layout or triggers, select Update source. The URL in OBS does not change.