How to Add a Countdown Timer or Clock to OBS Studio

Streaming & hybrid12 min readUpdated October 16, 2026

OBS Studio has no "Timer" or "Clock" entry in its list of sources. It does give you enough to build either one in a few minutes: a countdown script that ships with OBS and drives a Text source, a second bundled script that draws an analog clock, and a Browser source that can show any web page, timers and clocks included, on a transparent background.

Which one to use comes down to two questions: do you want a countdown or the time of day, and who needs to control it?

Which method fits your stream?

You want	Use	Good for	Watch out for
A simple "starting soon" countdown run from OBS	The bundled `countdown.lua` script with a Text source	Works offline, no extra install	Whole minutes only, restarts when you switch scenes, no pause
An analog clock face	The bundled `clock-source.lua` script	Ready-made, runs locally	Analog only, fixed look
A digital time-of-day clock	A Browser source showing a small local HTML file	Full control of font and size, works offline	You edit a file to change the look
A countdown someone else runs, or several timed segments in a row	A Browser source pointed at a web-based timer	Control from another device	Needs a stable internet connection
A time another program already calculates	A Text source with "Read from file"	Works with any app that writes a text file	Only as good as that app

Method 1: the countdown script that comes with OBS

OBS delivers a few example scripts with the program, and one of them, countdown.lua, turns a Text source into a countdown. The OBS Scripting Guide gives their location as [InstallationFolder]/data/obs-plugins/frontend-tools/scripts, though it doesn't list the scripts by name, so look for the file there. If your install doesn't have it, download the same script from the OBS Studio repository on GitHub and load it from wherever you save it.

In the Sources dock, click + and add a text source: Text (GDI+) on Windows, Text (FreeType 2) on macOS and Linux, as the OBS text sources guide describes. Name it something obvious like "Countdown", type any placeholder text, and set the font, size and colour.
Open Tools > Scripts, click +, and select countdown.lua. Lua scripts run inside OBS with no extra install. Python scripts need a separate Python installation.
With the script selected, fill in the settings on the right:
- Duration (minutes): the length of the countdown.
- Text Source: the text source you just made.
- Final Text: what replaces the numbers at zero. The default is "Starting soon (tm)", so change it to something like "Starting now".
Put the text source in your "starting soon" scene. The countdown starts when the source becomes active, which in practice means when its scene goes live in Program.

Reading the script's source code tells you the rest:

It takes whole minutes and displays hours, minutes and seconds, so a 5-minute timer starts at 00:05:00.
It stops when the source leaves Program and starts again from the full duration when it comes back. Cutting to your camera for a moment and back resets it.
There is no pause. The Reset Timer button restarts it, and you can give "Reset Timer" a hotkey in Settings > Hotkeys.
In Studio Mode, expect the countdown to wait for Program. The script reacts to a source becoming active, and the OBS API reference defines a source as active only when it is on the final output, while a source in Preview is merely showing. Test it in your own setup before relying on it.

If you need more than that, the OBS forum hosts community scripts with features like overtime counting or scene switching at zero. They are written by individuals, so check that the script page says it works with your OBS version, and test it before you rely on it live.

Method 2: an analog clock from the bundled clock script

clock-source.lua sits in the same folder. Load it the same way (Tools > Scripts > +), then click + in the Sources dock and you'll find a new source type called Lua Clock. It draws an analog dial with hour, minute and second hands from the computer's clock. It suits a "be right back" scene. It is not something a presenter can read at a glance.

Method 3: a digital clock from a local HTML file

For a digital time-of-day clock you control completely, write a tiny web page and load it as a Browser source. It runs offline and uses the computer's own clock.

Save this as clock.html:

<!doctype html>
<meta charset="utf-8">
<body style="margin:0; color:#ffffff; font:700 120px system-ui, sans-serif; text-shadow:0 2px 8px #000000">
  <div id="clock"></div>
  <script>
    const el = document.getElementById("clock");
    const tick = () => el.textContent = new Date().toLocaleTimeString();
    tick();
    setInterval(tick, 1000);
  </script>
</body>

Then in OBS (Browser sources are available on Windows and macOS, and on Linux through OBS's official packages):

In the Sources dock, click +, choose Browser, and name it "Clock".
Tick Local file and browse to clock.html.
Set Width and Height to fit the text, for example 700 and 200.
Leave Custom CSS as it is. According to the OBS Browser source guide, the default makes the page background transparent, removes the margins and hides scroll bars.

The clock follows your computer's regional format, which decides between 12-hour and 24-hour time. For 24-hour time regardless of region, change toLocaleTimeString() to toLocaleTimeString("en-GB"). To change size or colour, edit the numbers in the style line, save, and click Refresh cache of current page in the source's properties.

Method 4: a Browser source pointed at a web timer

A web-based timer is the usual choice when someone other than the OBS operator runs the clock, such as a producer on a laptop or phone, or when the show has several timed segments back to back. OBS only displays the page. The timer itself is controlled elsewhere.

Add it with + > Browser in the Sources dock, then work through the properties. The OBS Browser source guide lists them; these are the ones that matter for a timer:

URL: the timer's display or overlay link.
Width and Height: the default is 800 by 600. Set the size you want the timer to render at rather than dragging the source bigger in the canvas, because stretching a rendered page softens the digits.
Custom CSS: keep the default if you want the background transparent.
Shutdown source when not visible: when this is on, OBS unloads the page whenever the source is hidden or its scene isn't active, so the timer has to load and reconnect every time it reappears. For a timer you cut in and out of, leave it off.
Refresh browser source when scene becomes active: off by default. Worth turning on only if the page tends to go stale.
Refresh cache of current page: the reload button to try first if the timer freezes.

To place the timer precisely, select the source and open Edit > Transform > Edit Transform (Ctrl+E on Windows, Cmd+E on macOS), as covered in the OBS Sources Guide. Colour and size choices that work for a speaker-facing screen mostly apply to an overlay too; what to show on a speaker timer covers legibility in more detail.

Using StageClock's Broadcast Overlay as a Browser source

StageClock has a Broadcast Overlay view intended for this: the event's display URL with ?transparent=true on the end. It shows only the countdown digits on a transparent background, green while more than half the segment remains, yellow from half down to 10%, red for the last 10%, and it keeps counting into negative numbers after zero. There is no title, progress bar or message on it, and it is a countdown, not a time-of-day clock.

To use it, open your event's Control Panel, choose Views > Broadcast Overlay, and copy the address of the tab that opens into the Browser source URL field. The countdown is then run from the Control Panel, which also works on a phone signed in with the producer's Google account. The StageClock team has not tested the overlay inside OBS, so rehearse with your own setup before going live, and keep in mind it needs an internet connection for the whole stream.

Method 5: Read from file

Both OBS text sources have a Read from file option that displays the contents of a text file instead of typed text. If a timer app or script you already use can write its remaining time to a text file every second, point a Text source at that file and OBS shows whatever the file says. The app's own documentation will tell you where it writes the file and how often.

Common problems and how to fix them

There's a black or white box behind the timer. The page gives some element its own background colour, and OBS's default Custom CSS only clears the page body. Look for a transparent option in the timer service, or, if you know CSS, target that element in the Custom CSS box.
The digits look blurry. The source has been scaled up in the canvas. Reset it with Edit > Transform > Reset Transform, then raise Width and Height in the properties instead.
The countdown script never starts. Either the text source isn't in Program yet, or the script's Text Source is set to a different source. Check both.
The countdown script started over. Its scene left Program and came back. Keep the countdown on a scene you don't leave until it ends, or use a web timer that keeps its own state.
The web timer froze or shows old numbers. Click Refresh cache of current page, then check your internet connection and the device that controls the timer.
The clock shows the wrong time. Both clock methods read the streaming computer's clock. Check its time zone and turn on automatic time setting in the operating system.
The stream started dropping frames after you added browser sources. Each Browser source runs its own embedded Chromium page. Remove the ones you no longer use, and turn on Shutdown source when not visible for the ones that don't need to keep running in the background.

If you also run vMix, the same ideas apply with different menus: see how to add a countdown timer to vMix. For keeping the show itself to time once the overlay is up, timing webinars and hybrid meetings and timing podcasts and live interviews cover the producer's side.

Frequently asked questions

Can I see the timer without my viewers seeing it?

Yes, as long as it's a web timer. Leave it out of your scenes and open the same timer page in an ordinary browser window on a second monitor or a tablet. The bundled countdown script can't do this, because it only counts while its text source is live in Program.

Can an OBS countdown end at a set time, such as 7:00 pm?

Not with the bundled script, which counts a fixed number of minutes from the moment its scene goes live. Community scripts on the OBS forum can: Stream Countdown, for example, offers a countdown to a specific clock time and needs a text source named "CountdownText". As with any third-party script, test it on your OBS version first.

Key takeaways

OBS has no timer or clock source in its menu, but it ships countdown.lua (a countdown on a Text source) and clock-source.lua (an analog "Lua Clock"), both loaded from Tools > Scripts.
The bundled countdown runs in whole minutes, starts when its scene goes to Program, has no pause, and resets if you switch away and back.
For a digital time-of-day clock, a few lines of HTML loaded as a Browser source with Local file ticked works offline and is fully customisable.
Use a Browser source pointed at a web timer when someone else runs the clock or the show has several segments, and set Width and Height instead of stretching the source.
Whatever you use, rehearse the whole sequence in OBS before going live, including scene switches.