Preview vs. Countdown Renderer Display
Understanding the difference between the preview and renderer is essential for working effectively with gettickr.app. While they may look similar, they serve different purposes and behave differently.
Information
Preview = Live editing view in the editor with controls.
Countdown Display = Clean display view for OBS/websites without controls.
The Editor Preview
The preview you see in the editor is a live representation of your timer with full interactive controls. Every adjustment you make to colors, fonts, duration, or settings appears instantly.
Preview Features:
- ✅ Real-time updates as you edit
- ✅ Control buttons (play, pause, reset)
- ✅ Design testing and refinement
- ✅ Runs locally in your browser
Tip
Use the preview to test your timer thoroughly before embedding it.
Verify durations, check readability, and ensure colors work well together.
The Countdown Display
The countdown display is the clean, public-facing view when you embed your timer in OBS, on your website, or share the display URL. It shows your timer exactly as configured, without editor controls.
Countdown Display Features:
- ✅ Optimized for public display
- ✅ No editing interface or controls
- ✅ Lightweight and performant
- ✅ Perfect for embedding
Information
When you copy the display URL from your timer, it points to the
countdown display - this is what your viewers see.
Key Differences: Free vs. Premium
| Feature | Free Timers | Premium Timers |
|---|---|---|
| Display auto-start | ✅ Starts when page loads | ✅ Starts when page loads OR remotely controlled |
| Remote control | ❌ No (preview only) | ✅ Yes (editor controls display) |
| URL stability | ❌ New URL per edit | ✅ Same URL after edits |
| State persistence | ❌ Resets on page reload | ✅ Remembers state across reloads |
| Synchronization | ❌ No sync | ✅ Real-time sync across all displays |
Free Timer Behavior
Free Feature
Free timers start automatically when the countdown display loads.
Control buttons only work in the editor preview, not in the embedded display.
Important limitations:
- Making changes in the editor generates a new URL
- You must update the URL in OBS/website after edits
- Timer resets to start on every page refresh
- No remote control during live use
Workflow for free timers:
- Design timer completely in editor
- Test thoroughly in preview
- Copy display URL
- Embed in OBS/website
- For changes: Edit → Get new URL → Update embed
Premium Timer Synchronization
Premium Feature
Premium timers sync in real-time between editor and countdown
display. Control your live timer from the editor without changing URLs!
Premium advantages:
- Stable URLs: Display URL never changes, even after edits
- Remote control: Editor buttons control the live countdown display
- Cross-device sync: Control from computer, pause from phone
- State persistence: Timer remembers position across sessions
Workflow for premium timers:
- Create and save timer
- Embed renderer URL once
- Control anytime from editor (even during live streams!)
- Make design changes without updating embeds
- Timer state persists across browser restarts
Next Steps
timers remotely
- OBS Integration - Embed timers in streams