← Back to Home

Whenny Demo

Interactive examples of every Whenny feature

Smart Formatting

Context-aware formatting that automatically picks the best representation based on how far away the date is.

Just now

whenny(now).smart()

just now

5 minutes ago

whenny(fiveMinutesAgo).smart()

5 minutes ago

1 hour ago

whenny(oneHourAgo).smart()

6:03 AM

Yesterday

whenny(yesterday).smart()

Yesterday at 7:03 AM

Last week

whenny(lastWeek).smart()

Jan 30

Next week

whenny(nextWeek).smart()

Friday at 7:03 AM

Relative Time

Human-readable time distances, with an auto-updating React hook.

Past (5 min ago)

whenny(fiveMinutesAgo).relative()

5 minutes ago

Past (yesterday)

whenny(yesterday).relative()

yesterday

Future (next week)

whenny(nextWeek).relative()

in 6 days

Future (next month)

whenny(nextMonth).relative()

in 4 weeks

LIVEuseRelativeTime hook

This value updates automatically based on the interval you configure

Format Presets

Built-in presets for common formatting needs, plus custom templates with tokens.

Short

whenny(now).short()

Feb 6

Long

whenny(now).long()

February 6, 2026

Time

whenny(now).time()

7:03 AM

DateTime

whenny(now).datetime()

Feb 6, 7:03 AM

ISO

whenny(now).iso()

2026-02-06T07:03:49.565Z

Datewind Styles

Like Tailwind for dates. Semantic styles configured once, used everywhere with simple properties.

.xs

whenny(now).xs

2/6

.sm

whenny(now).sm

Feb 6

.md

whenny(now).md

Feb 6, 2026

.lg

whenny(now).lg

February 6th, 2026

.xl

whenny(now).xl

Friday, February 6th, 2026

.clock

whenny(now).clock

7:03 AM

.sortable

whenny(now).sortable

2026-02-06

.log

whenny(now).log

2026-02-06 07:03:49

Configure your own styles:

configure({
  styles: {
    xs: 'D/M',
    sm: 'D MMM',
    md: 'D MMM YYYY',
    // Add custom styles...
  }
})

Custom Patterns

Moment.js-style patterns when you need full control.

ISO Date

whenny(now).format('YYYY-MM-DD')

2026-02-06

Full Date

whenny(now).format('dddd, MMMM Do')

Friday, February 6th

Time

whenny(now).format('h:mm A')

7:03 AM

With Text

whenny(now).format('[Today is] dddd')

Today is Friday

Pattern tokens:

YYYY YY MMMM MMM MM M dddd ddd DD D Do HH H hh h mm ss A a Z [escaped]

Date Comparison

Compare two dates and get human-readable descriptions of the difference.

Smart comparison

compare(yesterday, now).smart()

1 day before

Days difference

compare(yesterday, now).days()

-1 days

Hours difference

compare(yesterday, now).hours()

-24 hours

Days between

compare(lastWeek, nextWeek).days()

-14 days

Duration Formatting

Format time durations (in seconds) in various styles.

Long

duration(3661).long()

1 hour, 1 minute, 1 second

Compact

duration(3661).compact()

1h 1m 1s

Clock

duration(3661).clock()

1:01:01

Human

duration(7200).human()

about 2 hours

45 seconds

duration(45).long()

45 seconds

2 hours

duration(7200).human()

about 2 hours

1 day

duration(86400).human()

about 24 hours

Countdown Timer

Live countdown to a future date using the useCountdown hook.

Countdown to New Year 2027

0

Days

0

Hours

0

Minutes

0

Seconds

useCountdown(targetDate) → { days: 0, hours: 0, minutes: 0, seconds: 0 }

Calendar Helpers

Utility functions for common calendar operations.

Is today?

calendar.isToday(now)

true ✓

Is weekend?

calendar.isWeekend(now)

false

Is business day?

calendar.isBusinessDay(now)

true ✓

Is past?

calendar.isPast(yesterday)

true ✓

Is future?

calendar.isFuture(nextWeek)

true ✓

Days until next week

calendar.daysUntil(nextWeek)

6 days

Start of month

calendar.startOf(now, 'month')

February 01, 2026

End of month

calendar.endOf(now, 'month')

February 28, 2026

Installation

Two ways to add Whenny to your project.

NPM Package

Traditional installation as a dependency.

npm install whenny whenny-react

shadcn Style (Recommended)

Copy code directly into your project for full ownership.

npx whenny init
npx whenny add relative smart calendar

Built with Whenny — Own your code. Configure your voice.

HomeGitHub