Overlays

Overlays are browser-based scenes served locally by Stream Kit. Add them to OBS as a Browser Source and drive them from actions with the Send to Overlay handler.

Create an overlay

1. Open Overlays in the sidebar.
2. Click New overlay.
3. Choose a mode:
   • Choose an overlay — pick a ready-made widget (Alerts, Chatbox, Timer, Counter, Goal, Leaderboard). These are vanilla HTML/JS projects with configurable settings and optional action presets. No build step.
   • Build an overlay — pick a framework starter (Vanilla, React, Svelte, etc.) and customize the project yourself.
4. Name the overlay and create the project.

Stream Kit copies the project into your overlays folder and registers it in the app.

Ready-made widgets

Open the overlay Configure page to edit settings (colors, templates, limits). Install action presets to wire Twitch/Rankings events automatically.

Ready-made widgets include Style and Layout sections: typography, colors, background, borders, alignment, and widget-specific knobs (for example chat bubble gap or goal bar height). Changes apply live via CSS variables — no custom CSS editor.

OBS browser source

Each overlay has a local browser source URL on its configure page (for example http://127.0.0.1:PORT/o/{overlayId}).

Typical setup in OBS:

1. Add Browser Source.
2. Paste the URL.
3. Set width and height to match your canvas.
4. Enable Shutdown source when not visible if you want to save resources.

The overlay server runs inside the desktop app on 127.0.0.1. The port is shown in overlay status in the app.

Cloud browser source

With a signed-in Stream Kit account and an active plan, built overlays publish to the cloud automatically. You get a public URL on the overlays list and configure page:

https://stream-kit.app/app/overlays/{overlayId}/

Use that URL in OBS the same way as the local URL. Keep the desktop app running while you stream — live Send-to-Overlay events and settings updates are forwarded from Stream Kit to the cloud page over a WebSocket bridge. When the app is offline, the page still loads but events pause until you reconnect.

You can Unpublish from the configure page to remove the public URL; publish again manually if you want it back.

Configure page

Open an overlay → Configure to edit settings defined by the overlay manifest (behavior, Style, Layout, and feature toggles). Changes are pushed to the live browser source over WebSocket (overlay:settings event).

Send events from actions

Add handler Overlay → Send to Overlay (overlay:overlay:send-to-overlay):

Quoted placeholders whose values are valid JSON (objects, arrays, numbers, booleans, or null) are inserted as real JSON types. For example, "\{message\}" sends the parsed object when {message} is a JSON object, and "\{prediction\}" sends the number 5.

The overlay JavaScript receives events on its WebSocket connection and updates the UI.

Receive events in actions

Overlays can send messages back to Stream Kit over the same WebSocket. Add trigger Overlay → Message Received (overlay:overlay:message-received) to run actions when an overlay sends an event.

Use the starter's connectOverlay() helper and call send('event:name', { ... }) from overlay JavaScript. Declare suggested outbound event names in manifest outgoingEvents.

See Message Received trigger and Send to Overlay handler.

Action presets

Some overlays ship action presets — pre-built triggers and handler chains you can install from the overlay detail page. Required plugins must be installed and enabled first.

Required plugins

Overlays can declare requiredPlugins in their manifest. The app warns if dependencies are missing before installing presets.

Related

• Overlay plugin
• Overlay authoring (for developers)