All overlays
Now Playing
A now-playing card for the current Spotify track: title, artist, album art, and a progress bar that interpolates smoothly between pushes from the reported position and duration. It hides itself when nothing is playing.Renders live from overlayNowPlaying.Add to OBS
http://127.0.0.1:5598/overlays/now-playing.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.
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. |