TimeFlow Card v3.4

Count-up Mode

TimeFlow Card can now count up from a given date/time, making it useful for elapsed-time displays such as:

• Time since move-in date
• Days since maintenance or service
• Time since installation, reset, or an incident

Use the new mode option:

type: custom:timeflow-card
title: "Time Since Filter Change"
mode: count_up
target_date: "2026-03-01T08:00:00"
show_days: true
show_hours: true
show_minutes: true

In count_up mode, target_date acts as the start/since date.

Optional progress models are also supported:

• count_up_goal_date: fill progress from start date to goal date
• count_up_cycle: repeat progress over a fixed cycle such as 30d, 12h, or 24:00:00

💡 Perfect for: Elapsed-time tracking, maintenance reminders, and “time since” dashboards.

Invert Progress Display

Added a new invert_progress option to reverse the progress behavior.

When enabled, the progress indicator starts full and subtracts over time instead of filling up.

invert_progress: true

New "Gridy" Style

Added a brand-new gridy card style with a responsive dot-grid progress display.

type: custom:timeflow-card
style: gridy
title: "Holiday Countdown"
target_date: "2026-12-25T00:00:00"
show_days: true
show_hours: false
show_minutes: false
show_seconds: false

Features of gridy:

• Responsive dot-grid progress layout
• Supports countdown and count-up modes
• Works with inverted progress
• Clean compact presentation for dashboards

Optional Header Icons Across Styles

Header icons are now optional across the supported icon-based styles:

• Classic
• Eventy
• Classic Compact

This makes configuration more flexible and avoids forced icon placeholders when not needed.

Improvements & Bug Fixes

Countdown Display Consistency

Improved countdown formatting and primary-unit selection so styles now behave more consistently.

Fixed issues where:

• day-only displays could differ between Eventy and other styles
• hidden smaller units could produce misleading fallback values
• different styles could show different primary countdown values for the same config

Countdown display logic is now shared more consistently across styles.

Localization

Danish Localization Added

• Add Danish localization for timer and time formats by @Vandborg88 in #38

New Contributors

• @Vandborg88 made their first contribution in #38

Notes

• Breaking Changes: None
• Browser Cache: Clear your browser cache after updating
• Compatibility: Existing configurations continue to work unchanged
• Feature Availability:
  • mode defaults to count_down
  • invert_progress defaults to false
  • gridy is optional and does not affect existing cards

TimeFlow Card v3.3

New Features

Year & Week Countdown Units

Expanded countdown granularity with two new time units:

• Year: Display years remaining in countdowns spanning multiple years
• Week: Show weekly breakdowns for better granularity in month-long countdowns

Toggle each unit independently via the card configuration:

type: custom:timeflow-card
title: "New Year Countdown"
target_date: "2027-01-01T00:00:00"
show_years: true
show_weeks: true
show_days: true
show_hours: true
show_minutes: true
show_seconds: false

All three card styles (Classic, Eventy, Classic Compact) now support years and weeks. The cascade order follows natural time units: Years → Months → Weeks → Days → Hours → Minutes → Seconds.

💡 Perfect for: Long-term project timelines, annual events, and detailed countdown displays.

Localization support added for 6 languages:

• English, French, German, Spanish, Italian, Dutch

Bug Fixes

Fixed: Cards All Black in Firefox & Edge on Windows 11 (#35)

Previously, the card appeared completely black (with hardcoded #1a1a1a fallback) when Home Assistant theme CSS variables didn't resolve properly in Shadow DOM on Firefox and Edge browsers on Windows 11.

Now fixed:

• Changed default background fallback to transparent instead of hardcoded dark color
• Card now respects system and Home Assistant theme colors automatically

All existing configurations continue to work unchanged, and the card now displays correctly across all modern browsers.

Notes

• Breaking Changes: None
• Browser Cache: Clear your browser cache after updating
• Compatibility: All existing configurations continue to work unchanged
• Feature Availability: Year and Week units default to false for backward compatibility

TimeFlow Card v3.2

New Features

Two New Card Styles: Eventy & Classic Compact

TimeFlow now offers three distinct visual styles to match your dashboard aesthetic:

Eventy Style (style: eventy)

A sleek, compact horizontal layout that puts the focus on a single prominent countdown unit. Perfect for event countdowns and minimal dashboards.

💡 Inspired by u/musicjock's dashboard on Reddit

type: custom:timeflow-card
title: "Summer Vacation"
subtitle: "Tue, Jul 15"
target_date: "2026-07-15T00:00:00"
style: eventy
header_icon: mdi:beach
header_icon_color: "#3b82f6"
header_icon_background: "rgba(59, 130, 246, 0.2)"

Classic Compact Style (style: classic-compact)

A horizontal layout that combines the best of both worlds—compact size with a progress circle indicator.

type: custom:timeflow-card
title: Project Deadline
header_icon: mdi:briefcase
progress_color: "#ef4444"
compact_format: false
creation_date: "2026-01-23T23:18:00"
target_date: "2026-01-29T23:19:00"
show_days: true
style: classic-compact

Classic Style (style: classic) - Default

The original vertical layout with full progress circle. No configuration needed—this remains the default.

Header Icons: Add Visual Identity to Your Cards

All card styles now support customizable header icons with full color control:

• header_icon: MDI icon name (e.g., mdi:cake-variant, mdi:airplane-takeoff)
• header_icon_color: Icon color (hex, rgb, or CSS variable)
• header_icon_background: Background color for the icon container

Example with icon styling:

type: custom:timeflow-card
title: "Birthday Party"
target_date: "2026-03-15T18:00:00"
header_icon: mdi:cake-variant
header_icon_color: "#ec4899"
header_icon_background: "rgba(236, 72, 153, 0.15)"

Tip: For a cohesive look, use a semi-transparent version of your icon color as the background (e.g., rgba(236, 72, 153, 0.15)).

Bug Fixes

Fixed: "Starting..." Display Issue (#33)

Previously, when a countdown had just begun or when all time units were disabled except one that hadn't started counting, the card would display "Starting..." instead of useful information.

Now fixed: The card automatically falls back to the highest available time unit instead of showing "Starting...". This ensures you always see meaningful countdown information.

Notes

• Breaking Changes: None
• Browser Cache: Clear your browser cache after updating to ensure new styles load correctly
• Compatibility: All existing configurations continue to work unchanged

TimeFlow Card v3.1.3

New Features

Subtitle Prefix & Suffix: Customize Your Countdown Text!

You can now add custom text before and after the countdown display. This is perfect for natural language like "in 5 days" or "3 hours remaining!".

• subtitle_prefix: Text to display before the countdown (e.g., "in", "Only")
• subtitle_suffix: Text to display after the countdown (e.g., "left", "remaining")

Example:

type: custom:timeflow-card
title: "Vacation Countdown"
target_date: "2026-07-15T00:00:00"
subtitle_prefix: "Only"
subtitle_suffix: "remaining!"
# Result: "Only 5 days 3 hours remaining!"

Another example for a minimal look:

subtitle_prefix: ""
subtitle_suffix: "left"
# Result: "5 days 3 hours left"

Note: Prefix and suffix only apply to the auto-generated countdown text. They do not apply to custom subtitle text or expired_text.

Performance Improvements

WebSocket Template Rendering

Template evaluation now uses Home Assistant's WebSocket subscription API instead of HTTP API calls. This provides:

• Faster updates: Templates now receive real-time push updates instead of polling
• Lower resource usage: Reduces load on both the browser and Home Assistant server
• Better performance on older devices: Significantly reduces CPU usage during template evaluation
• Automatic cache management: Subscriptions are automatically cleaned up when the card is removed

This change is completely transparent—your existing template configurations will continue to work without any changes.

Please clear your browser cache after updating to ensure the new changes load correctly.

TimeFlow Card v3.1.2

This release fixes a bug in month calculation #31 .

What's Changed

• Month Calculations: Replaced the problematic 30.44-day month averaging with proper calendar-based month counting
• Timezone Bug Fix: Fixed the visual editor timezone conversion issue that was shifting times when saving
• DST-Aware Calculations: Month calculations now properly handle daylight saving time transitions

Please clear your browser cache after updating to ensure the new changes load correctly.

TimeFlow Card v3.1.1

Hope you have been enjoying the visual editor, This release brings translations and support for themes to the card.

What's Changed

• feat: Add Home Assistant theme integration for card styling by @YpsilonTM in #24
• Translations Added: Added localized strings for countdown.starting and countdown.completed across supported languages (EN, FR, DE, ES, IT, NL).
• Localized Time Units: Full and compact time unit labels are now passed through the localization engine so both "1 hour 30 minutes" and "1h 30m" render correctly in the user's language.
• Service-Level Localization: Timer subtitles (Alexa, Google Home, standard HA timers) now use the localization function so status messages and device/label formatting are translated.

Breaking Changes: None!
Requirement: Please clear your browser cache after updating to ensure the new translations and editor strings load correctly.

Enjoy the update!

New Contributors

• @YpsilonTM made their first contribution in #24

Full Changelog: v3.1.0...v3.1.1

TimeFlow Card v3.1.0 is here! 🎉

Happy New Year, everyone! I hope you’ve been enjoying the card. After a bit of a break, I’m releasing a major update today that focuses on making the card easier for everyone to use.

What’s New:

• 🎨 Visual Editor: Finally! You can now configure the entire card via the UI, no more manual YAML editing required.
• 🔊 Google Nest Support: Full support for Google timers (active, paused, and finished states).
• 🔊 Amazon Alexa Support: Full support for Alexa timers (active, paused, and finished states).
• 🧠 Auto Discover Active Timers: The card now seamlessly fetch active timers from Alexa and Google and display them on the same card.

Breaking Changes: None!
Requirement: Please clear your browser cache after updating to see the new editor.

Enjoy the update!

Release v3.0.3

Building on v3.0.2, this patch refines Alexa timer handling, auto-discovery selection, and expired-state messaging so the card reports “Timer complete” and “No timers” consistently without refresh.

🐞 Bug Fixes

Alexa timer lifecycle and messaging

• Alexa timer now shows paused states.
• “Timer complete” (or “ timer complete”) now shows consistently for both explicit timer_entity and auto-discovered timers.
• Removed stale “Completed! 🎉” fallback during auto-discovery; finished states use timer-aware subtitles instead.
• Multiple timers are handled more reliably via ID-based pinning of the just-finished active timer.

Auto-discovery behavior

• Prefer active timers; fall back to paused; otherwise show “No timers”.
• Paused Alexa timers are included and selectable when no active timer exists.
• Live transition to “No timers” when no active/paused timers remain—no browser refresh required.

🔧 Notes

• No configuration changes required; behavior improves automatically after updating.

🔧 Installation & Update

• Clear your browser cache after updating to ensure the new logic loads correctly.

Release v3.0.2

Building on v3.0.1, this patch fixes Action handling and Alexa timer UI and empty-state messaging so the card reports timer status more clearly and reliably.

🐞 Bug Fixes

Action handling

• Fixed the error ' No entity provided for more info dialogue' showing when custom tap action is defined.
• can now handle tap_action, hold_action, and double_tap_action.

Alexa timer messaging and auto-discovery

• Clarified no-timer messaging when Alexa timers are absent or idle:
  • "Timer ready" now shows as "No timers" when no active Alexa timers are present.
  • When auto_discover_alexa: true finds no timers, the subtitle now shows "No timers" instead of falling back to a 0s display.

🔧 Notes

• These fixes remove confusing "0s" and "Timer ready" states and improve the card's UX for Alexa timer users.
• No config changes required; behavior improves automatically after updating.

🔧 Installation & Update

• As always, clear your browser cache after updating to ensure the new logic loads correctly.

Release v3.0.1

Building on the v3.0.0, this release introduces new ways to interact with your timers and enhances the card's reliability with improved configuration validation and graceful error handling.

✨ New Features

Action Handling: Make Your Timers Interactive!

Your countdowns are no longer just for viewing! You can now configure actions to run when you tap, hold, or double-tap the card. This opens up a world of possibilities for interacting with your timers and other entities in Home Assistant.

• Interactive Cards: Add tap_action, hold_action, and double_tap_action to your card's configuration.
• Default Timer Action: Timer entities now have a default tap_action that opens the "more-info" dialog, making it easy to pause, finish, or restart your timers.

Example:

type: custom:timeflow-card
timer_entity: timer.laundry_timer
tap_action:
  action: call-service
  service: timer.toggle
  target:
    entity_id: timer.laundry_timer
hold_action:
  action: more-info

Enhanced Validation and Error Display

To make configuration easier and more reliable, the card now includes a more robust validation system and a user-friendly error display.

• Detailed Validation: The card now validates your configuration with severity levels (critical, warning, info) and provides helpful suggestions for fixing any issues.
• Graceful Error Display: If there's an error in your configuration, the card will now display a clear error message instead of crashing, making it much easier to debug your setup.

🔧 Other Key Improvements

• Improved Alexa Timer Support: The logic for discovering and handling Alexa timers has been enhanced to be more reliable.
• Add support for templates in the Expired_text: The expired_text now supports templates.

🔧 Installation & Update

As with the previous major update, it is highly recommended to clear your browser cache after updating to ensure you are running the latest version of the card.

Thank you for your continued support! This update makes the TimeFlow card more powerful and user-friendly, and I'm excited to see what you build with it.