Make your own stream overlay extension

What you make

A folder with two things: a description file called streamdzy-extension.json (the name, the size of the overlay and the controls) and a web page. Streamdzy draws the controls in its own screens, on your phone and on the web control panel, and shows your page as a layer of your show.

1. The description file

{
  "apiVersion": 1, "id": "hello-box", "name": "Hello box", "version": "1.0.0", "author": "Me",
  "overlays": [{ "id": "box", "name": "Hello box", "file": "box.html", "width": 640, "height": 160, "anchor": "bottom" }],
  "controls": [
    { "id": "text", "type": "text", "label": "Words", "default": "Hello!" },
    { "id": "color", "type": "color", "label": "Colour", "default": "#ffffff" },
    { "id": "show", "type": "toggle", "label": "Show", "default": true }
  ]
}

Controls can be switches, numbers, words, colours, choices and buttons. Width and height are measured on a picture 1280 pixels wide.

2. The web page

<div id="t" style="font:800 64px system-ui;text-shadow:0 2px 12px #000"></div>
<script>
  function draw() { var v = Streamdzy.values; t.textContent = v.text; t.style.color = v.color; t.style.opacity = v.show ? 1 : 0; }
  Streamdzy.ready(draw); Streamdzy.on("change", draw);
</script>

Streamdzy is added to your page automatically. It holds the current values and tells you when they change, from the app, your phone or the web panel.

3. Add it

In Streamdzy open Settings, Extensions, Add an extension and choose the folder. Press Add to my show. Change the words on your phone and watch the overlay change.

Buttons that count

A button can change values by itself: add to a number, set a value, flip a switch, or undo after a few seconds. That is how the built-in counter and goal bar work, and it means the same overlay in the show and in OBS never counts twice. Events can do it too: “when a follow arrives, add one”.

Use it in OBS

Press Copy link on the extension, then in OBS add a Browser source with that address and the overlay’s size. The values still live in Streamdzy.

What it cannot do

An extension is a web page, not a program. It cannot read your files or use your camera, and it may use the internet only if its description asks for it, which you will see as a warning. That is what makes it safe to try one from someone you do not know.