OBS-Studio.net Independent OBS Studio reference
Sign in Create account
Fix OBS Tutorials Settings Tools Overlays Plugins Games Hardware Platforms Latest version FAQ Learning paths Search Sign in Create account

Overlay builder

Design layers on a canvas, autosave, upload images (re-encoded PNG only), and export PNG or a static browser-source package for OBS Studio.

Export PNG Export transparent PNG Export browser-source ZIP

Use this overlay in OBS Studio

Exports are static files only. Uploaded HTML or JavaScript is never executed in the builder or in the browser-source package.

Browser Source (recommended for ZIP export)

  1. Click Export browser-source ZIP, then unzip the package on your PC.
  2. In OBS Studio, under Sources, click + and choose Browser.
  3. Check Local file and browse to the package index.html.
  4. Set Width and Height to match your canvas (shown in the editor status bar).
  5. Leave custom CSS empty unless you need a local tweak. Click OK.

Image Source (PNG export)

  1. Click Export PNG or Export transparent PNG and save the file.
  2. In OBS Studio, add an Image source and point it at that PNG.
  3. Transparent PNG works best over gameplay; standard PNG includes the project background color.

Tips

  • Match OBS canvas resolution to the overlay preset (1920×1080, 1280×720, or vertical 1080×1920).
  • After editing in the builder, export again and refresh the Browser Source (right-click → Refresh) or replace the Image file.
  • Webcam frames are visual guides — add a real Video Capture Device source in OBS underneath or clipped to match.