Capystreama

OBS Overlay

OBS overlay

The Overlay: On/Off toggle in the Item List tab starts an embedded web server that serves your current list as an OBS browser source, with live updates — so your stream always shows the up-to-date list.

Adding it to OBS

  1. Flip Overlay: On. The app serves the list on loopback at http://127.0.0.1:8420. If that port is already taken, it falls back to an OS-assigned free port on 127.0.0.1 — check the app for the address in use.
  2. In OBS, add a Browser source.
  3. Set the URL to the overlay address (e.g. http://127.0.0.1:8420).
  4. Size the source to taste. Toggle items or edit counts in the app and the browser source updates on its own — a small live-reload script (/reload.js) keeps the page in sync without a manual refresh.

The overlay shows the same stacks-of-64 breakdown as the app, so on-stream counts always agree with what you see in the Item List.

Customizing the look

The overlay's HTML is rendered from templates that ship embedded in the app but are copied to your cache directory on first run so you can edit them:

  • a page shell,
  • a per-item template, and
  • the live-reload script.

The Settings tab has buttons to open the templates folder and to reset the templates back to their defaults, so you can restyle the overlay (fonts, colors, layout) to match your stream and revert if you paint yourself into a corner.