Documentation
Everything you need to know about creating and customizing your StreamTimer countdown clocks.
Creating an Account
Click the Create a Timer or Sign In button in the navigation bar to sign in. You can sign in with an email and password, a one-time email code, or your Google account, and get started in seconds.
Creating Your First Timer
Once logged in, navigate to your Dashboard and click the Create New Timer button. This opens the timer editor where you can configure every aspect of your countdown clock. Give your timer a name, set a target date and time, and customize the appearance to match your event or brand.
Setting a Target Date and Time
Use the date picker to select your target date, then set the exact time using the time picker. StreamTimer supports timezone selection, so you can set your countdown to a specific timezone regardless of where you or your viewers are located. The timer will automatically sync and display the correct countdown for all viewers worldwide.
Timer Title
Give your timer a descriptive name (e.g., "Weekly Stream Countdown" or "Product Launch"). The title helps you identify timers on your dashboard. Leave it blank and your timer is auto-named "Timer 1", "Timer 2", and so on. The URL slug is generated automatically (a date-time code like 260711-224834) and can be customized in the editor.
Target Date and Time
Select the exact date and time your event starts using the calendar date picker and time picker controls. Choose from any timezone in the world to ensure your countdown is accurate for your target audience, regardless of their location.
Prefix and Suffix Text
Add custom text that appears before (prefix) and after (suffix) the countdown numbers. For example, set the prefix to "Starting in" and the suffix to "Get ready!" to create a message like: Starting in 2 DAYS 05:30:15 Get ready! The prefix and suffix each have their own left / center / right alignment controls, so you can position them independently of the countdown.
Completion Message
Set a custom message that displays when the countdown reaches zero. Leave it blank for no message, or set anything you like, such as "We're Live!", "The Show Begins Now!", or "Welcome to the Event!" The completion message automatically replaces the countdown display.
Text Styling
Fully customize the appearance of your countdown text. Choose a text color using the color picker, select from 50+ Google Fonts including display fonts, handwriting styles, and monospace options. Adjust the font size to make your countdown as large or small as needed for your display.
Timer Alignment
Position your countdown text anywhere on screen using the 9-point grid alignment system. Choose from top-left, top-center, top-right, middle-left, middle-center, middle-right, bottom-left, bottom-center, or bottom-right positions. This is especially useful when overlaying the timer on video content or positioning it within a broadcast layout.
Show/Hide Time Units
Control which time units are displayed in your countdown. Toggle days, hours, minutes, and seconds on or off independently. For example, if your event is only minutes away, you might hide days and hours to show only minutes and seconds. You can also toggle the separator — the ":" shown between units — on or off.
Automatic unit hiding
Leading units that are zero hide themselves automatically. A timer 90 minutes out shows 1:30:00, not 0 DAYS 0 HOURS 1:30:00. The smallest enabled unit always remains visible, so the countdown never disappears entirely as it winds down.
Trim Leading Zero
When Trim Leading Zero is on (the default), the very first visible number drops its leading zero — you see 9:07:03. Turn it off and every unit is padded to two digits — 09:07:03. Numbers after the first are always shown as two digits either way.
Unit Labels
Toggle the visibility of the unit labels (DAYS, HOURS, MINUTES, SECONDS) that appear next to the countdown numbers. Hide labels for a cleaner numeric-only display, or show them for clarity.
Line Spacing
Adjust the line spacing between elements in your timer display. This controls the vertical distance between the prefix text, countdown numbers, and suffix text, allowing you to fine-tune the layout for your specific use case.
Solid Color
Set a solid background color using the color picker. Choose any color to match your brand or event theme. This is the simplest background option and works well for clean, professional displays.
Gradient Presets
Choose from 12 built-in gradient presets for eye-catching backgrounds. Each preset features carefully designed color combinations that look great on screen. Simply click a preset to apply it instantly.
Custom Gradient Builder
Build your own custom gradient with 3-color support and angle control. Pick your colors, adjust the gradient angle, and create a unique background that perfectly matches your branding.
Transparent Background
Enable transparent background mode for use with broadcast software. This creates a perfect chroma key effect, ideal for overlaying the countdown on top of your video content in OBS Studio, vMix, Wirecast, or any other software that supports browser sources with transparency.
Advanced Backgrounds
StreamTimer also includes these additional background options:
- Animated gradients — Smooth, continuously moving gradient animations that add dynamic visual interest
- Mesh gradients — Complex, multi-point gradient patterns for modern, artistic backgrounds
- Geometric patterns — Repeating geometric shapes and patterns layered over colors
- Custom background images — Upload your own image to use as the timer background
Overlay Box
Enable an optional overlay box that appears behind the timer text. This is useful for improving text readability when using busy backgrounds or background images. The box acts as a semi-transparent panel that makes the countdown easier to read.
Box Controls
Customize the content box with the following controls:
- Color — Choose the box background color using the color picker
- Opacity — Adjust the transparency from fully transparent to fully opaque
- Padding — Control the spacing between the box edges and the timer text
- Border radius — Set the corner roundness from sharp corners to fully rounded
Box Alignment
Position the content box using the same 9-point grid alignment system as the timer text. This lets you place the box and its contents in any corner, edge, or center of the display.
Preview Timer States
Test Mode lets you preview how your timer will look at different points in time without waiting for the actual countdown. Toggle Test Mode on in the timer editor to override the target date with a simulated time. This is invaluable for checking how your timer looks when it's close to expiring or after it has completed.
Quick Presets
Use the built-in quick presets to instantly jump to common time states:
- 1 day — Preview the timer with 1 day remaining
- 1 hour — Preview the timer with 1 hour remaining
- 1 minute — Preview the timer with 1 minute remaining
- 5 seconds — Preview the timer about to expire
- Expired — Preview the completion message and any redirect behavior
Exporting Configurations
Click the Export button in the timer editor toolbar to download your timer's configuration as a JSON file. The export includes all style settings, text configuration, background settings, and content box options. The file is named based on your timer title for easy identification.
Importing Configurations
Click the Import button to load a previously exported JSON configuration file. The import will apply all style settings from the file to your current timer. If the imported file includes a title and your current timer has no title set, the title will be applied as well. Invalid files will be rejected with a helpful error message.
Sharing Between Timers
Use import and export to quickly duplicate styling between timers. Export the configuration from one timer, then import it into another to apply the same look and feel. This is perfect for maintaining a consistent brand across multiple countdown clocks for different events.