All overlays
Want something bespoke instead? Build it in the Overlay Studio.
Alerts
A stack of alert toasts. Each new follow, subscription, gift sub, cheer, raid, or donation slides in with the actor name and any amount or message the event carried, then ages out on a timer.Renders live from overlayAlert.Add to OBS
http://127.0.0.1:5598/overlays/alerts.html?broadcasterId=YOUR_TWITCH_ID- In OBS, add a Browser source and paste the URL above.
- Replace YOUR_TWITCH_ID with your Twitch user id. The exact host and port are shown in the app's Overlays panel.
- Set a transparent background and turn off "Shutdown source when not visible".
- Not sure it works yet? Add &preview to replay sample events with no live connection.
Options for this overlay
| Parameter | Default | Purpose |
|---|---|---|
| ttl | 8000 | How long each toast stays on screen, in milliseconds. |
| max | 3 | How many toasts are visible at once before the oldest drops. |
Common parameters
| Parameter | Default | Purpose |
|---|---|---|
| broadcasterId required | none | Your Twitch user id. The overlay joins this broadcaster's live group and will not connect without it. |
| preview | off | Add ?preview (or ?demo) to replay sample events with no live connection. Handy for a first look in OBS. |
| scale | off | A size multiplier over the default root sizing, for example scale=1.5. |
| log | off | Console verbosity: ?log=silent, error, warn, info, or debug. ?debug is shorthand for ?log=debug. |
| base | off | Origin override for advanced cross-origin setups. Defaults to the page origin. |
Theme parameters
Re-skin any overlay from the URL, no rebuild needed. Each maps to a CSS custom property. Write %23 for the # in a color, since # ends the query string.| Parameter | Default | Purpose |
|---|---|---|
| bg | off | Background color. |
| fg | off | Foreground text color. |
| accent | off | Accent color. |
| font | off | Font family. |
| fontSize | off | Base font size. |
| weight | off | Font weight. |
| radius | off | Corner radius. |
| blur | off | Backdrop blur amount. |
| padX | off | Horizontal padding. |
| padY | off | Vertical padding. |
| letterSpacing | off | Letter spacing. |
