Relative Time Element Demos

Download Back To CSSScript.Com

Display time ago, future dates, durations, and localized timestamps using GitHub’s Relative Time Element.

Module loading

Live relative value

42 seconds ago

This value uses the element's automatic refresh behavior.

Session elapsed 0s
Countdown 0 seconds

Relative Timeline

Near dates stay relative. Dates beyond the threshold become formatted calendar dates.

Now now format="relative"
Seconds ago 42 seconds ago auto refreshes by unit
Minutes ahead in 6 minutes future tense
Yesterday yesterday numeric="auto"
Tomorrow tomorrow numeric="auto"
Past threshold on May 3 threshold="P30D"
Custom prefix scheduled for Jul 27 prefix="scheduled for"

Format Modes

The same timestamp can render as relative text, a localized date, a duration, or compact elapsed time.

Auto a day ago default alias for relative
Relative a day ago format="relative"
Datetime Tue, May 12, 9:30 AM format="datetime"
Duration 1 hour, 45 minutes, 5 seconds format="duration"
Micro 5h format="micro"
Elapsed 1h 2m 5s format="elapsed"

Date Options

Attributes map to the browser's Intl date and time options.

Long date Wednesday, June 17, 2026 weekday, second, time-zone-name
12-hour cycle 9:30 PM hour-cycle="h12"
24-hour cycle 21:30 hour-cycle="h23"
Inherited zone 10:45 PM GMT+9 parent time-zone="Asia/Tokyo"
No title 2 hours ago no-title

Precision, Tense, and Style

Precision controls the smallest displayed unit. Tense can lock output to past or future phrasing.

Second precision 2 hours, 2 minutes, 35 seconds precision="second"
Minute precision 2 hours, 2 minutes precision="minute"
Hour precision 2 hours precision="hour"
Past only now future date with tense="past"
Future only now past date with tense="future"
Narrow style in 2h format-style="narrow"

English Locale Variants and Time Zones

Each element can use its own English locale and IANA time zone.

US English 3 days ago lang="en-US"
British English 17 June 2026 at 14:45 lang="en-GB" time-zone="Europe/London"
Australian English 17 June 2026 at 11:45 pm lang="en-AU" time-zone="Australia/Sydney"
New York 9:45 AM EDT America/New_York
London 2:45 PM GMT+1 Europe/London

Shadow Part Styling

The rendered text exposes a root part, so page CSS can style the value inside the shadow tree.

Default part 30 minutes ago
Styled part 30 minutes ago

Live Attribute Workbench

Change the element's date, format, precision, tense, title behavior, absolute-time preference, and ARIA state.

Current render now
title: waiting
Date
Toggles
relative-time-updated events will appear here.
No event has been captured for the workbench value yet.
The CDN module could not be loaded.