Date Time Display is a flexible component for Framer that lets you render dynamic date and time directly inside your designs using simple formatting tokens. Instead of being limited to a fixed clock or calendar format, you can fully control how the output appears by inserting symbols inside curly braces within your text. The component automatically replaces those symbols with the correct live values and updates every second.
The component supports both system time and international time. In system mode, it simply follows the viewer’s device clock. In international mode, you can select a region and then choose a specific timezone within that region. This makes it useful for dashboards, global websites, event countdown pages, or any interface that needs to show time from different parts of the world.
Another useful feature is the Font Source connection. Instead of manually setting typography properties, the component can inherit styles from any text layer you connect. It automatically reads the font family, size, weight, line height, letter spacing, and other typographic settings, allowing the displayed time to match your design system perfectly.
The formatting system is designed to be simple and readable. You write normal text and place tokens inside curly braces wherever you want dynamic values to appear. For example:
Today is {dddd}, {MMMM} {do}, {YYYY} at {h}:{mm}:{ss} {a}
The component will convert that into a live sentence such as:
Today is Tuesday, March 10th, 2026 at 8:43:12 pm
Key features
Fully customizable date and time formatting using tokens
Supports both 12-hour and 24-hour clocks
Automatic updates every second
Local system time or international timezone display
Region-based timezone selection for easier navigation
Typography inheritance through a connected text layer
Works with any layout width or height in Framer
Lightweight logic built with native Intl date formatting
Because the formatting system is token-based, you can construct almost any readable style of date or time — from simple clocks to full descriptive sentences. This makes the component useful across a wide range of interfaces, including hero sections, dashboards, event pages, global product sites, and productivity tools.
MJ Nafi
