Guide
You can type text as normal. To insert a timer, type [time]. To format a timer, include a format like so: [time, format]. There are expressions available such as $if for conditional rendering. There is also a section for styling in OBS to customize the look of the timer.
Timers
[start] [~]
A timer set to when the page was opened.
[18:00] [6:00 pm]
A time-only timer. The date will default to today.
[2025-4-20]
A date-only timer. The time will default to the closest time to today. For future dates that will be 0:00; for past dates that will be 23:59.
[2025-12-25 7:00] [2025-12-25 7:00 am]
A date time timer.
[+10] [-70]
A timer relative to when the page was opened in seconds.
[+1:00] [-1:25]
A relative timer that includes minutes and seconds.
[+2:00:00] [-1:15:40]
A relative timer that includes hours, minutes, and seconds.
[x-1-1 0:00] [12:x]
You can type x in any place to make it flexible and use the current time's unit. For example, if the year is x, then it will be set to the current year.
[^x-12-25] [^7:00pm]
You can type ^ in front to make it jump to the next future time. This will only apply to time-only timers or ones that use x. If there is no future time, it will use the last valid time.
Formatting
[~]
With no format, the timer will render in humanized terms like "a few seconds" or "2 minutes".
[~, affix]
The timer will render in humanized terms, but include prefixes and suffixes like "a few seconds ago" or "in 2 minutes".
[~, future] [~, >]
If this timer is in the future it will render true, otherwise it will render false.
[~, present] [~, =]
If this timer is in the the present it will render true, otherwise it will render false.
[~, past] [~, <]
If this timer is in the past it will render true, otherwise it will render false.
[~, d h:mm:ss]
In all other cases, the format is interpreted dynamically. s is 0-59 seconds, m is 0-59 minutes, h is 0-23 hours, and d is days. ss and the like pads it to two digits.
[~, D, H, M, S]S, M, and H are variants that render the total amount elapsed in their respective units. D counts how many days apart is the timer from the current time, so tomorrow will be "1" even if it's less than 24 hours away.
[~, H "hours" M "minutes" S "seconds"]
You can put text in quotes to skip formatting them, otherwise the h, m, and s would be interpreted following the previous rules. If you want to type a quote normally, you have to escape it with a backslash \".
[~, in D "days" ago] [~, +-M:ss]
You can type in and ago and have them only render when they should. You can also type +- to render a minus sign if the timer is in the future.
Expressions
$if([~, S] + 5 == 10){true} $if([+10, future]){Future}{Past}
With the power of $if expressions you can conditionally render text! You can evaluate math with it, and this is what formats that render true or false are useful for. The second curly brace pair can be omitted.
$math([~, S] / 10)
If you want to just evaluate math expressions and render the result, you can do that with $math.
Styling in OBS
In your OBS browser source's custom CSS box, insert this and tweak it to your liking. If you want to center align the text, insert margin: auto;. If you want to right align the text instead, insert margin-left: auto;.
#timer {
color: #ffffff;
font-size: 96px;
--outline-width: 0.075em;
--outline-color: #000000;
}