1) Understanding the Left Panel

The left panel is organized into several sections, each serving a specific purpose:

• Project Name — Always visible at the top, where you name your clock
• Timer — Collapsible section for running a live countdown
• Clock Settings — Collapsible section for configuring duration, markers, and display options
• Segments — Collapsible section for managing your timed blocks
• Pointers — Collapsible section for adding timing markers

Collapsible Sections: Click any section header (Timer, Clock Settings, Segments, or Pointers) to collapse or expand it. This helps you focus on what you're currently working on and reduces visual clutter. Your collapsed/expanded preferences are saved automatically.

Resize the Panel: Hover over the right edge of the left panel until you see a resize cursor, then drag left or right to adjust the panel width (280px to 600px). Your preferred width is saved automatically.

2) Set Your Show Duration

In the Clock Settings section of the left panel, enter your total planned runtime in minutes.
Example: 45 minutes

The circular clock will automatically scale to this duration.

Note: You cannot reduce the clock duration below the total time used by your current segments. If you need to reduce the clock duration, first remove or shorten some segments.

3) Add Segments

Click the + button in the "Segments" section to create a new timed block.

Give it:

• A name
• A start time (MM:SS)
• A duration (MM:SS)
• A color
• Optional notes

As you add segments, the clock updates automatically.

4) Resize & Reorder Segments

Click and drag a segment boundary on the clock to resize it.
The timing updates in real time, preserving overall duration accuracy.

You can reorder segments from the left list.

Clone Segments: Use the 📋 clone button next to any segment to create an exact duplicate. The cloned segment appears immediately after the original with " (copy)" added to its label, making it easy to create similar segments without re-entering all details.

Important: When you edit a segment's duration or delete a segment, all following segments automatically adjust their start times to maintain a continuous timeline without gaps.

5) Add Pointers

Pointers are markers for important timing cues—like sponsor reads, announcements, kicks, or transitions.

Click the + button in the "Pointers" section to add one.
Each pointer:

• Has a label
• Marks a specific time
• Shows visually as a radial line

6) View Timer

You can run the clock with a live timer to simulate a real event.
A visible clock line sweeps around the circle as time passes.

Use:

• Start
• Pause
• Reset

This is helpful for live production, rehearsals, and pacing.

Hide Timer: Click the 👁️ eye icon in the timer section to hide the timer controls and clock hand when you want a cleaner view of your clock design. The timer section collapses and the moving hand disappears from the clock face. Click again to restore the timer.

7) Customize Clock Display

You can customize how your clock appears with several options:

Show Minute Markers: Toggle the display of minute tick marks around the clock edge for easier time reading.

Show Segment Duration: Toggle whether segment durations appear on the clock face. When enabled, each segment shows its duration in compact format (e.g., "3m", "10s", "1m 30s") next to the segment label.

Clock Size: Use the slider below the clock to adjust its display size from 300px to 900px, or set it to "Fit to Screen" for maximum visibility. This is helpful when presenting or working on different screen sizes.

Dark Mode: Click the 🌙/☀️ icon in the top right to toggle between light and dark themes. Your preference is saved automatically.

8) Edit Segment Labels

Click a segment on the clock or list to update its details.
You can rename, recolor, edit duration, or add notes.

Duration Protection: The app prevents you from creating segments that exceed your total clock duration. If you try to add or extend a segment beyond the available time, you'll receive an alert asking you to either reduce the segment duration or increase the clock duration first.

9) Export

You can export your clock as:

• PDF
• PNG
• CSV

This helps you collaborate, print, or archive your programming.

10) Save & Load Projects

Your clock automatically saves to your browser—no signup needed.

Multiple Projects: Create and manage multiple clock designs using the "Project" menu. You can:

• Create new projects (blank or from template)
• Switch between existing projects
• Rename your current project
• Delete projects you no longer need

Import & Export: Export projects as JSON files for backup or sharing, and import them later on any device. This is perfect for collaboration or keeping archives of past show formats.

Tips

• Keep major segments consistent from episode to episode
• Use pointers to mark short cues and ad reads
• Try to keep variation ≤ 10% episode to episode
• Record interviews slightly long → edit tighter for consistency
• Use colors consistently across similar segment types

Ready to get started?

Open showclock.online | Broadcast Clock Designer →

Want to learn more about broadcast clocks? Read our guide