So I am working on overlay for broadcast so i made in two files which is control and overlay

[terse sundial]

What you’re missing is a shared “bridge” between the control page and the overlay page.

If both pages are just two separate HTML files (especially if you open them as file://...) then changing something in control.html won’t magically update overlay.html, because they run in different browser contexts.

What won’t work (or only works in limited cases)

• Global JS variables: only exist inside that one page.
• postMessage: only works if you opened the overlay window from the control window (same window relationship).
• localStorage / BroadcastChannel: only works reliably when both pages are in the same browser + same profile + same origin.
  OBS Browser Source is basically a separate Chromium instance/profile, so it usually won’t share storage with your Chrome control panel.

What will work (recommended)

You need to sync state over the network using one of these:

Option A (best): WebSocket (real-time)

Run a tiny local server (Node) and broadcast updates:

• control.html sends updates (color, CSV data, etc.)
• overlay.html listens and re-renders instantly

Socket.IO example (fastest to build):

server.js

import express from "express";
import http from "http";
import { Server } from "socket.io";

const app = express();
const server = http.createServer(app);
const io = new Server(server, { cors: { origin: "*" } });

app.use(express.static("public")); // put control.html + overlay.html in /public

let state = { color: "#ff0000", rows: [] };

io.on("connection", (socket) => {
  socket.emit("state", state);              // send current state to new clients
  socket.on("update", (patch) => {
    state = { ...state, ...patch };         // merge updates
    io.emit("state", state);                // broadcast to all overlays
  });
});

server.listen(3000, () => console.log("http://localhost:3000"));

control.html

<script src="/socket.io/socket.io.js"></script>
<script>

  const socket = io();

  function setColor(color) {
    socket.emit("update", { color });
  }

  // example: when CSV uploaded and parsed:
  function setRows(rows) {
    socket.emit("update", { rows });
  }
</script>

overlay.html

<script src="/socket.io/socket.io.js"></script>
<script>
  const socket = io();

  socket.on("state", (state) => {
    // update DOM with state.color, state.rows, etc.
    document.body.style.setProperty("--accent", state.color);
    renderTable(state.rows);
  });
</script>

Then in OBS Browser Source you load:

• http://YOUR-PC-IP:3000/overlay.html
  and in Chrome you open:
• http://localhost:3000/control.html