All overlays
Want something bespoke instead? Build it in the Overlay Studio.
Chat
A rolling chat feed. Messages render with the author name in their Twitch color, badges for broadcaster, moderator, VIP, and subscriber roles, and pronouns when they have already been resolved. Message text is always set as plain text, never as HTML.Renders live from overlayChatMessage.Add to OBS
http://127.0.0.1:5598/overlays/chat.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 |
|---|---|---|
| max | 14 | How many messages to keep before the oldest scrolls off. |
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. |
