1Build the timer
Everything in the Configurator tab updates the preview the moment you change it - there’s no “apply” button. Work through the six tabs in any order:
- Timer - pick a mode (countdown to a date, countup, fixed duration, or just a clock), set the target, choose which units to show, and add titles or extras like the current day of the week.
- Typography - font, weight, size, spacing. Tabular numerals are on by default so digits don’t jitter when the seconds change.
- Colors - transparent for OBS, solid, or gradient backgrounds. Independent colors for numbers, labels, title, accent, and the unit boxes.
- Layout - boxed cards, inline
12:34:56, segmented, stacked, or minimal. Tweak gap, padding, border radius, and where labels sit. - Effects - glow, shadow, tick animation when digits change, colon blink, scanlines, urgency colors on the last 10s.
- Templates - one-click presets. Use them as starting points and refine.
The preview shows a real, isolated render of the exact file you’ll export. The toolbar above it switches the preview background between transparent (checkerboard), dark, light, and a sample scene so you can sanity-check contrast before you ship.
2Export it
The Export card lives in the bottom-left of the configurator. You have four ways to take your timer with you:
Download .html
Saves a single self-contained timer.html file. No external assets, no dependencies
(Google Fonts is fetched at runtime - see FAQ if you need fully offline). Best for OBS Local file
mode.
Copy HTML
Puts the full HTML source on your clipboard. Paste it into a code editor, GitHub Gist, or your CMS to host it yourself.
Copy Base64
The raw base64 string of the HTML. Useful when a tool asks for an encoded blob, or when you want to commit a timer to a config file without dealing with quotes and line breaks.
Copy Data URL
A ready-to-paste data:text/html;base64,… URL. Drop it straight into an OBS Browser
Source URL field - no file management at all.
3Use in OBS Studio
Two equally good routes. Pick whichever fits your workflow:
Option A - Local file (recommended for permanence)
- Click Download .html. Save it somewhere stable, e.g.
Documents/OBS/timers/stream-start.html. - In OBS, in your Sources dock, click + and choose Browser.
- Name the source (e.g. Start Timer) and click OK.
- Tick Local file, click Browse, and pick the HTML file you saved.
- Set the dimensions. 1920 x 1080 works for full-screen scenes; for a corner widget use something like 800 x 200. The timer scales to fit.
- Leave Custom CSS empty - the timer already sets a transparent background when you picked “Transparent” in Colors.
- Click OK. Resize and position the source on your canvas. Right-click → Interact if you ever need to click into it.
Option B - Data URL (zero files)
- Click Copy Data URL in the export card.
- Add a Browser source in OBS, leave Local file unchecked.
- Paste the data URL into the URL field. Set width/height and click OK.
Tip - refreshing the timer: right-click the Browser source → Properties → Refresh cache of current page. For a fixed-duration countdown, this is how you restart the clock on the next stream.
OBS performance settings
- FPS - 30 is plenty. The timer only repaints once per second (or per frame for the millisecond mode).
- Shutdown source when not visible - leave OFF if you want a fixed-duration timer to keep ticking while you’re on a different scene; turn ON if you want it to restart every time the scene is shown.
- Refresh browser when scene becomes active - useful for stream-start screens where you want a fresh countdown every session.
4Embed on a website
The export is a complete HTML document, so the simplest embed is an <iframe>.
<iframe
src="https://yoursite.com/path/to/timer.html"
width="800"
height="200"
frameborder="0"
style="border:0;background:transparent;"
allowtransparency="true"
></iframe>Or paste a Data URL directly into the src attribute if you don’t want to host the file. Both
work.
If you want the timer inline (not iframed) you can also open the downloaded file in any editor and copy
its <style>, <script>, and markup into your own page - it’s plain
vanilla code with no build step.
Export format reference
| Format | What it is | Best for |
|---|---|---|
.html download |
A single self-contained HTML file with embedded CSS and JS | OBS Local file source, hosting on your own site |
| Copied HTML | The same source as the download, on your clipboard | Pasting into editors, gists, CMS blocks |
| Base64 | The HTML, base64-encoded as a single line | Storing in config files, JSON, env vars |
| Data URL | data:text/html;base64,… - a base64 payload wrapped as a URL |
OBS Browser Source URL field, iframe src |
FAQ & troubleshooting
The OBS browser source shows a white background - I picked transparent.
Make sure Background mode in the Colors tab is set to Transparent and
re-export. Also clear OBS’s cache: right-click the source → Properties → Refresh cache of current page.
Some old OBS versions need allowtransparency behavior - switching to a Data URL source
instead of Local File usually fixes it.
Can I use this fully offline (no Google Fonts request)?
Pick System Sans or System Mono from the bottom of the font dropdown. The exported HTML then has zero network requests - works on a laptop with no internet at a live event.
My countdown uses my local time. What about viewers in other timezones?
The target time you set in the Timer tab is encoded with your current timezone offset. Everyone watching your stream sees the countdown reach zero at the same real-world moment as you do - the rendering is local to your OBS machine, not your viewers’ browsers, so timezones never come into play for OBS use. For website embeds the target is anchored to the original timezone too.
Restarting a duration timer between streams.
Refresh the Browser source in OBS (right-click → Refresh) or enable Refresh browser when scene becomes active in the source properties - the timer resets to your configured duration on each refresh.
How big is the exported file?
Typically 10-18 KB depending on the options you enable. The Export card shows the live size as you configure.
Can I edit the exported file by hand?
Absolutely. The HTML is unminified and commented. You can change anything - the config object at the
top of the <script> block drives the whole render.