Display Local HTML File in OBS Studio Browser Source

Using local HTML files in OBS Studio is a powerful way to add custom overlays, alert boxes, and interactive widgets to your stream without relying on external web hosting. This guide provides a straightforward, step-by-step tutorial on how to configure and display any local HTML file using the built-in OBS Studio Browser Source, allowing you to easily integrate custom web designs into your live broadcasts.

Step 1: Prepare Your HTML File

Ensure your HTML file (along with any associated CSS, JavaScript, or image assets) is saved in a dedicated folder on your computer. Keep this folder in a permanent directory so OBS does not lose the file path later.

Step 2: Add a Browser Source in OBS Studio

  1. Open OBS Studio on your computer.
  2. Go to the Sources dock at the bottom of the screen.
  3. Click the + (Add) icon at the bottom of the Sources dock.
  4. Select Browser from the pop-up menu.
  5. In the prompt, name your source (e.g., “Custom Overlay”) and click OK.

Step 3: Configure the Browser Source for a Local File

  1. In the properties window that appears, locate and check the box labeled Local file. This action changes the URL input field to a file path browser.
  2. Click the Browse button next to the “Local file” field.
  3. Navigate to the folder where your HTML file is stored, select the .html file, and click Open.
  4. Adjust the Width and Height settings to match the resolution of your HTML project (for example, 1920 width and 1080 height for a full HD screen).
  5. (Optional) Under Custom CSS, you can delete the default body background code if your HTML file already contains its own styling, or leave it as is if your HTML background is transparent.
  6. Click OK to save the settings and load the file.

Step 4: Interact with Your HTML Source (If Applicable)

If your HTML file contains interactive elements like buttons, forms, or navigation menus: 1. Right-click the Browser Source in your Sources list. 2. Select Interact from the context menu. 3. A new window will open, allowing you to click and type directly into your HTML file as if you were viewing it in a standard web browser.