Clock
The Clock widget displays the current time, updating automatically every second. It's ideal for live broadcast overlays, studio wall clocks, and any graphic where real-time wall clock is required.
Adding a Clock
Click Clock in the Widgets panel in the sidebar — it's placed immediately at the centre of the canvas, already selected.
Configuration
Select the Clock. Format and timezone live in the Design tab; text styling is in the context toolbar.
Format (Design tab)
Pick a preset, each shown with a live preview of its output:
| Preset | Output example |
|---|---|
| Time — 24h with seconds | 14:35:02 — default |
| Time — 24h | 14:35 |
| Time — 12h with seconds | 02:35:02 PM |
| Time — 12h | 02:35 PM |
| Date + time | 14 Oct 2026 22:34 |
| Day + date + time | Wed 14 Oct 22:34:30 |
Or choose Custom to build your own strftime (opens in a new tab)-style format from a clickable directive list (%H/%I hour, %M minute, %S second, %p AM/PM, %T/%R shorthand, %d/%m/%b/%B/%Y date parts, %a/%A weekday, %Z/%z timezone).
Timezone (Design tab)
A searchable dropdown grouped by region — start typing a city or region name to filter. Choose local to always show the viewer's own local time.
Text styling (context toolbar)
With the Clock selected, font family, font size, text color, stroke color, and background color are set in the context toolbar above the canvas — the same controls used for a Text object.
For a clean broadcast look, use a monospaced font (like Roboto Mono) so the digits don't shift width as the seconds tick over.
Bind
From the Bind tab, a Clock can expose Format and Timezone as operator controls or data bindings — plus the fields shared with other objects (Text, Font family, Font size, Background, Fill color, Stroke color, Stroke width). See Bind for how exposing, locking, and control types work.