Overlays

Timer

A persistent countdown driven from chat. The deadline lives on the server so the timer survives OBS restarts, browser refreshes, and overlay reconnects — every visible timer overlay on your channel shows the same countdown.

Setup

On the Timer tool page, create a Timer source. You'll get a private browser-source URL with a wid token.
In OBS, add a Browser Source at any size (1920×1080 covers the canvas; smaller is fine if you've picked a corner position).
Optional: enable chat commands and set your Twitch channel name on the same tool page.

Chat commands

All command names are configurable. The defaults:

Command	Default permission	What it does
`!timer` `[duration]`	Mod	Starts a countdown. With no duration, uses the configured default. Accepts `5m`, `30s`, `1h 30m`, `2:30`, `1:30:00`, or bare seconds.
`!timerAdd` `<duration>`	Mod	Adds time. Same duration syntax. While running, extends the deadline. While paused, extends the paused remaining. While idle, behaves like start.
`!timerCancel`	Mod	Stops and resets to idle.
`!timerPause`	Mod	Pauses a running timer. Remaining time is preserved.
`!timerResume`	Mod	Resumes from paused. New deadline = now + remaining.
`!timerShow`	Mod	Makes the overlay visible.
`!timerHide`	Mod	Hides the overlay. State keeps running underneath.
`!timerElapsed`	Everyone	Briefly flashes the elapsed time on the overlay (~3s).
`!timerRemaining`	Everyone	Briefly flashes the remaining time on the overlay.

Duration formats

30s — 30 seconds
5m — 5 minutes
1h — 1 hour
1h 30m — 1 hour 30 minutes (combine any units)
2:30 — 2 minutes 30 seconds (mm:ss)
1:30:00 — 1 hour 30 minutes (hh:mm:ss)
120 — bare integer = seconds

Why it survives refresh

The timer's end time (epoch milliseconds) is stored server-side in a Durable Object. The overlay reads the state on mount and computes the displayed time locally from endsAtMs - now, so the countdown stays smooth without server roundtrips. Every mutation (start, pause, add, etc.) updates the server and broadcasts the new state to every connected timer overlay on this channel.

Multiple timer overlays

Create as many Timer browser sources as you want — one per scene is common. They all show the same countdown; state is per-channel, not per-source. !timerHide hides all of them;!timerShow brings them all back.

First time using OBS browser sources?

If you've never added a browser source before, read How to add an OBS browser source first — same setup works for every overlay in the toolset.