How to add the timer to OBS Studio
- Set up your timer above and click Copy URL.
- In OBS, click + under Sources and choose Browser. Give it a name such as “Countdown”.
- Paste the link into the URL field.
- Set Width and Height to the size shown under your link (800 × 300 unless you changed it). Leave Custom CSS as it is: it keeps the background transparent.
- Using a sound? Tick Control audio via OBS. The alarm then gets its own slider in the audio mixer and reaches your viewers. To hear it yourself as well, open Advanced Audio Properties and set Audio Monitoring of this source to “Monitor and Output” (“Monitoring Enabled” in newer versions).
- Click OK and move the timer to where you want it in your scene.
Tip: tick Refresh browser when scene becomes active and the countdown starts from the beginning every time you switch to that scene. That is exactly what you want for “Starting soon” and “Be right back” scenes.
Restart or keep running? With Refresh browser when scene becomes active or Shutdown source when not visible ticked, OBS reloads the page, and a countdown starts again from the beginning. For long timers such as a subathon, turn on Keep running after a refresh or use Until a time. Both always show the correct remaining time after a reload.
Streamlabs, Meld, XSplit and TikTok LIVE Studio
The overlay is a normal web page, so every streaming app with a browser source can show it. In Streamlabs Desktop add a Browser Source, in XSplit a Webpage source, in Meld Studio a Browser layer and in TikTok LIVE Studio a Link source. Paste the same URL and use the same width and height. For the portrait layout of TikTok, pick the size Vertical (1080 × 1920). If a Link source in TikTok LIVE Studio stays empty, change any value in the link, for example add &v=2 at the end, so the app loads it again.
The automatic start “When you go live” uses a feature of OBS and works in OBS Studio and Streamlabs Desktop. In other apps, the timer simply starts as soon as the source loads.
Which mode fits your stream?
- Countdown: a fixed duration such as 5 or 10 minutes for “Starting soon”, “Be right back” or a short challenge.
- Until a time: counts down to a clock time like 20:00, so the timer always matches your announced schedule, even if you open OBS early.
- Stopwatch: counts up. Use it as stream uptime (“Live for 1:23:45”) or for challenge and speed attempts.
- Run of show: several timed segments in a row, each with its own label: just chatting, main game, break, outro. The label changes automatically.
- Pomodoro: focus and break blocks for study with me and co-working streams, with an optional long break after every fourth block.
Control the timer while you are live
Right click the source in OBS and choose Interact. In that window you can control the timer without opening any other tool:
| Action | Effect |
|---|---|
| Click | Pause or resume (or start, if the start is set to “On click”) |
| Double click or R | Restart |
| N | Jump to the next step |
| + / - | One minute more or less |
| ↑ / ↓ | Ten seconds more or less |
Clicks work in every OBS version. Keyboard shortcuts depend on the version and may not reach the page on macOS, so use the mouse when in doubt. Adding time is handy for subathons and for the moment when your stream simply needs a few more minutes.
Remote control with Streamer.bot or a Stream Deck
OBS can send events to browser sources through its built-in WebSocket server, so you can control the timer from other tools without opening OBS. In Streamer.bot, a Stream Deck plugin or any obs-websocket client, send the request CallVendorRequest with the vendor obs-browser, the request type emit_event and this data:
{"event_name": "finaltimer", "event_data": {"action": "add", "seconds": 300}}Possible actions are start, pause, resume, toggle, restart, next and add (with seconds or minutes, negative values subtract time). Run several timers at once? Give each one an Overlay ID and add "id": "subathon" to the data, so only that timer reacts. A typical subathon setup: a Streamer.bot action on every new sub that adds five minutes.
Tips for a clean overlay
- Over gameplay, use Outline or Soft shadow, so the digits stay readable on bright and busy backgrounds.
- To make the timer bigger, change Width and Height in the source properties instead of dragging the corners. With “Fit to source” the digits are then rendered sharp at the new size.
- For long timers, enable Keep running after a refresh. A crash, an OBS restart or a reload then no longer resets your subathon clock.
- The overlay uses fonts that are already on your computer. Nothing is downloaded from other servers, and it loads only a few kilobytes.
- The overlay page shows no ads, no tracking and no watermark. Only the number of loaded overlays is counted, without any personal data.
URL parameters for advanced users
Everything you set above ends up in the link, so you can also edit it by hand. The most important parameters:
| Parameter | Example | Meaning |
|---|---|---|
mode | down, until, up, seq, pomo | Countdown, until a time, stopwatch, run of show, Pomodoro |
t | 10m, 1h30m, 5:00 | Duration of the countdown |
at | 20:00 | Target time for “until a time” |
step | 5m~Starting soon | One step of a run of show (repeat for every step) |
work, brk, long, every, cycles | 25m, 5m, 15m, 4, 4 | Pomodoro focus, break, long break, long break after, number of blocks |
title, end | any text | Title above the timer, text at zero |
after | text, stay, hide, over | What happens at zero |
style | plain, pill, bar, ring | Look of the timer |
color, accent, bg | ffffff | Colours as hex values without # |
sound, vol | alarm3, 80 | Sound at zero and volume in percent |
start | load, stream, click | When the timer starts |
resume | 1 | Keep running after a refresh |
beep | 3 | Beeps in the final seconds |
id | subathon | Name for remote control via events |
Want your own font or colours beyond the options? In the OBS source properties, Custom CSS accepts rules such as .ov-time { font-family: "Your Font"; } and .ov-title { text-transform: uppercase; }.
Frequently asked questions
Is the OBS timer free?
Yes. The overlay is completely free, needs no account and shows no watermark or ads. There are no limits on how many timers you create.
Does the countdown keep running when I switch scenes?
Yes, as long as OBS keeps the source loaded, which is the default. If you tick “Shutdown source when not visible”, the page reloads when it becomes visible again. Enable “Keep running after a refresh” or use “Until a time”, and the timer still shows the correct remaining time.
Why do I not hear the alarm?
Check that a sound is selected, that “Control audio via OBS” is ticked in the source properties and that the source is not muted in the audio mixer. In a normal browser tab, sound only plays after you have clicked on the page once.
Can the timer start automatically when I go live?
Yes. Set the start to “When you go live”. The timer then waits and starts the moment OBS starts streaming. Outside OBS it simply starts right away.
Does it work with Streamlabs, Meld or TikTok LIVE Studio?
Yes. Every app with a browser or web source can show the overlay. Paste the same link and use the width and height shown on this page. The automatic start when you go live works in OBS Studio and Streamlabs Desktop.
Can subs or donations add time automatically?
Yes, with a tool like Streamer.bot that reacts to subs, bits or donations. It sends an event through the OBS WebSocket server and the timer adds the time. No login and no connection to your Twitch account are needed on our side.
Will my viewers see the same time?
Yes. The timer is rendered on your computer and sent to your viewers as part of the stream, so everyone sees exactly the time on your screen, wherever they are.
Is any data collected?
The overlay page loads no ads, no analytics and no cookies. It only increases an anonymous counter of loaded overlays. Your settings are stored in the link itself.