Overlay
Send events between Stream Kit actions and browser source overlays in OBS.
Overlay
The Overlay integration is built into Stream Kit (not a separate installable plugin). It serves overlay projects locally and exposes overlay triggers and handlers for actions.
User workflow
- Create an overlay — either Choose an overlay (ready-made widgets) or Build an overlay (framework starter).
- Add the browser source URL to OBS.
- Configure overlay settings on the overlay Configure page.
- Install recommended action presets when available, or add Overlay → Send to Overlay / Overlay → Message Received manually.
Send to Overlay handler
| Handler ID | overlay:overlay:send-to-overlay |
| Field | Description |
|---|---|
| Overlay | Select target overlay |
| Event | Event name from the overlay manifest expectedEvents |
| Payload | Optional. JSON tab for a template, or Variable tab to pass one variable through (for example {message}). Leave empty to forward trigger context. |
Full reference: Send to Overlay.
Message Received trigger
| Trigger ID | overlay:overlay:message-received |
| Condition | Description |
|---|---|
| Overlay | Filter by overlay (optional) |
| Event | Match event name (equals, contains, …) |
| JSON field | Optional payload field match |
Full reference: Message Received.
Events and payloads
App → overlay: Overlays declare expectedEvents in their manifest. Your overlay JavaScript listens on WebSocket and handles each event type.
Overlay → app: Overlays send { event, payload } frames over the same WebSocket. Declare suggested names in manifest outgoingEvents. Stream Kit runs matching Message Received actions.
Payload can be omitted on Send to Overlay to forward the full trigger context, or set explicit JSON for structured data.
Action presets
Overlays can bundle action presets (triggers + handlers) installable from the overlay detail page. Required plugins must be enabled first.
Developers
To author overlay projects and manifests, see Overlay authoring.