CwDuration

Live-ticking duration from a timestamp with adaptive formatting and optional countdown mode.

< 1 minute
< 1 hour
< 1 day
≥ 1 day
Countdown to zero (1 minute)
Alarm every 1 minute
Fired: 0
CwDuration example Copy code 
<CwDuration
	from={new Date(Date.now() + 60 * 1000)}
	countDown={true}
/>

let alarmFireCount = $state(0);
<CwDuration
	from={new Date()}
	alarmAfterMinutes={1}
	alarmCallback={() => (alarmFireCount += 1)}
/>
Documentation Upgrade

Start here

CwDuration is a live-updating relative time display. Give it a starting timestamp, decide whether it counts up or down, and optionally attach an alarm callback for time-based workflows.

How to think about it

  1. Pick the time origin `from` accepts a `Date`, ISO string, or timestamp number, so pass whichever form your data already uses.
  2. Choose elapsed or countdown mode Leave `countDown` off for age or uptime. Turn it on when you need time remaining until a deadline.
  3. Use alarms for deadline side effects `alarmAfterMinutes` runs callbacks relative to `from`, which is useful for quiet-device timeouts and SLA checks.

Props and callbacks

APITypeDetails
from Required
Date | string | numberBase timestamp to measure from.
countDown

Default: false

booleanWhen true, counts down toward zero instead of counting up from the past.
tickMs

Default: 1000

numberRefresh cadence in milliseconds.
alarmAfterMinutes
numberMinutes after `from` when the alarm callbacks should fire.
alarmCallback
() => voidRuns once when the alarm threshold is reached.
alarmResetCallback
() => voidRuns when the alarm condition is cleared because the source time changes.

Copy-paste examples

These snippets intentionally show the full public API surface the live demo relies on.

Elapsed time since last sync

This is the common dashboard usage for freshness indicators.

Elapsed time since last sync Copy code 
<CwDuration from={device.lastSeenAt} />
Countdown timer with fast refresh

Use a shorter `tickMs` when the UI should feel more animated.

Countdown timer with fast refresh Copy code 
<CwDuration
	from={new Date(Date.now() + 5 * 60 * 1000)}
	countDown
	tickMs={250}
/>
Silence alarm after 30 minutes

Attach callbacks when elapsed time should trigger a workflow.

Silence alarm after 30 minutes Copy code 
<script lang="ts">
	let timedOut = $state(false);
</script>

<CwDuration
	from={lastDeviceMessageAt}
	alarmAfterMinutes={30}
	alarmCallback={() => (timedOut = true)}
	alarmResetCallback={() => (timedOut = false)}
/>