svelte-time

• Purpose: svelte-time is a Svelte component and action designed to make timestamps human-readable while maintaining machine-parseable values in a semantic <time> element. It leverages day.js for lightweight date-time handling.

• Key Features:

  • Formats timestamps in human-readable or relative formats (e.g., "a few seconds ago").
  • Supports live updates for relative timestamps with customizable intervals.
  • Exports dayjs with pre-loaded relativeTime plugin for extended functionality.
  • Allows customization of locale, timezone, and formatting via day.js plugins.

• Target Audience: Svelte developers (specifically Svelte 5 in Runes mode) needing flexible timestamp rendering. For Svelte 3/4 or non-Runes mode, use svelte-time@1.0.0.

• Svelte Support:

  • Primary framework: Svelte (v5 with Runes).
  • Provides both a <Time> component and a svelteTime action for raw HTML elements.

• Core Use Cases:

  • Displaying dates in relative or formatted styles (e.g., "MMM DD, YYYY").
  • Live-updating timestamps (e.g., "2 minutes ago" refreshes automatically).
  • Localization and timezone customization via day.js plugins.

• Example:

  <Time relative /> <!-- Output: <time datetime="...">a few seconds ago</time> -->
  

• Extras:

  • Supports global locale/timezone settings.
  • Exposes dayjs for direct manipulation (e.g., dayjs().tz("America/Toronto")).

For a live demo, try the Svelte REPL example .