Dynamic OBS Lower Thirds Using Local JSON Files

This guide explains how to dynamically update lower-third text graphics in OBS Studio using a local JSON file. By setting up a local HTML file as an OBS Browser Source, you can pull data from a simple text-based JSON file and have your on-screen graphics automatically update in real-time whenever the file is saved. This workflow is ideal for streamers, technical directors, and live producers who want to manage titles, names, and social handles on the fly without manual layout adjustments inside OBS.

Step 1: Create the JSON Data File

First, you need a data file to hold the text for your lower third. Open a text editor (like Notepad or VS Code) and paste the following code:

{
  "name": "Jane Doe",
  "title": "Lead Software Engineer"
}

Save this file as data.json in a dedicated folder on your computer.

Step 2: Create the HTML and JavaScript Template

Next, create the visual template that OBS will display. This HTML file fetches the data from your data.json file every few seconds to check for updates.

In the same folder as your JSON file, create a new file named lower_third.html and paste the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dynamic Lower Third</title>
    <style>
        body {
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            margin: 0;
            padding: 40px;
            background-color: transparent;
            overflow: hidden;
        }
        .lower-third {
            display: inline-block;
            background: rgba(15, 15, 15, 0.95);
            border-left: 6px solid #0078ff;
            padding: 15px 30px;
            border-radius: 0 8px 8px 0;
            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
            color: white;
            transition: all 0.5s ease;
        }
        #name {
            font-size: 28px;
            font-weight: bold;
            margin: 0;
            letter-spacing: 0.5px;
        }
        #title {
            font-size: 18px;
            color: #a0a0a0;
            margin: 5px 0 0 0;
        }
    </style>
</head>
<body>

    <div class="lower-third">
        <div id="name">Loading...</div>
        <div id="title"></div>
    </div>

    <script>
        async function fetchAndUpdateData() {
            try {
                // Fetch the local JSON file using a cache-busting timestamp
                const response = await fetch(`data.json?t=${Date.now()}`);
                if (!response.ok) throw new Error("Could not fetch JSON");
                
                const data = await response.json();
                
                // Update HTML elements with the JSON values
                document.getElementById('name').textContent = data.name;
                document.getElementById('title').textContent = data.title;
            } catch (error) {
                console.error("Error reading JSON file:", error);
            }
        }

        // Check for updates every 2 seconds
        setInterval(fetchAndUpdateData, 2000);

        // Initial load
        fetchAndUpdateData();
    </script>
</body>
</html>

Step 3: Add the Template to OBS Studio

Now, configure OBS Studio to display your local HTML file:

  1. Open OBS Studio.
  2. Locate the Sources dock, click the + icon, and select Browser.
  3. Name the source (e.g., “Dynamic Lower Third”) and click OK.
  4. Check the box for Local file.
  5. Click Browse next to the Local File path and select your lower_third.html file.
  6. Set the Width to 1920 and the Height to 1080 (or match your canvas resolution).
  7. Scroll down and ensure Refresh browser when scene becomes active is checked if you want to force updates on scene transition.
  8. Click OK.

The lower third will now appear on your OBS canvas, displaying the name and title from your JSON file.

Step 4: Update the Text Live

To update the text during a broadcast:

  1. Open your data.json file in any text editor.
  2. Edit the text inside the quotes for "name" or "title".
  3. Save the file.

Within two seconds, the changes will automatically display in OBS without requiring you to refresh the source or restart the stream.