CwDuration

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

Formatting ranges and alarms

< 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)}
/>
API

Usage and API reference

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

Each snippet is a complete, working example you can paste into a Svelte 5 component.

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)}
/>