Adding the Output URL to OBS as Browser Source
Step-by-step OBS Studio setup: add your Output URL as a Browser Source at 1920x1080 with a transparent background.
TutorialBeginnerUpdated
To display your graphics in OBS Studio, add the Output URL as a Browser Source.
Steps
- In OBS, click + under Sources.
- Select Browser.
- Name it (for example, "Helmo Graphics").
- Paste your Output URL in the URL field.
- Set Width to 1920 and Height to 1080.
- Check "Shutdown source when not visible" (optional, saves resources).
- Click OK.
Important settings
- Custom CSS: leave empty (Helmo handles all styling).
- Refresh browser when scene becomes active: optional, but recommended.
- Hardware Acceleration: keep enabled for best performance.
Transparent background
The output has a transparent background by default. In OBS, the Browser Source will show your overlays with transparency: everything behind the graphics will be visible.
Layer order
Place the Browser Source above your camera/video sources in the OBS source list so the overlays appear on top.
Tips
- Create one Browser Source per graphic (not per overlay).
- All subcompositions within a graphic share the same output URL.
- If the graphic doesn't appear, make sure you've deployed it first.