Stream Timer Generator

Want the HTML + app.js files directly on your PC?Contact me on Discord

Timer Duration

Allowed values: 0 to 59 seconds.

Labels

Quick Presets

Timer Color

Label Color

Background Color

Fonts and Settings

120px
20px
100%

Effects

Actions

Read before exporting
See the OBS Guide to configure the Browser source correctly.

Auto: starts when opened. Manual: left-click to pause or resume, press R to reset. In OBS, export again and select Interact.

Saved Configurations

Preview

10:30

© 2026 Copyright

Timer • Customize your stream timer • Perfect for OBS, Streamlabs, and more.

Powered by dtkzipp

OBS Guide

Set up your timer in OBS Studio

Source Setup

  1. Export the generated HTML file.
  2. In OBS, add a "Browser" source and set its local path to the exported HTML file.
  3. To make the background transparent with a Chroma Key:
    • In the source filters, add a "Chroma Key" filter.
    • If the background is white, it will be transparent automatically. Otherwise, choose the background color and adjust the settings.
    • If you are not sure how to use Chroma Key, use a white background or open "Effects", then "Background Mode", and select "Transparent" on this page.

Timer Controls

  1. To control the timer manually in OBS:
    • Check "Manual controls in exported file", then export the HTML again.
    • In OBS, right-click the Browser source and select "Interact".
    • In the Interact window, left-click the timer to start or pause it.
    • In the "Interact" window, press R to reset the timer.
  2. In the "Export" tab, leave "Manual controls in exported file" unchecked to start the timer automatically when the Browser source opens in OBS. To control it manually, check this option and follow step 4 above.