Lovelace Timeline Card

Share your Projects! Dashboards & Frontend
1

I had been looking for a timeline card for a long time but couldn’t find one, so I decided to create one myself.

This is my first custom card, and I had hardly any experience with JavaScript before. But with a lot of reading, trial and error, and help from ChatGPT, I finally managed it :sweat_smile:

Timeline Card Screenshot
Timeline Card Screenshot487×328 15 KB

:sparkles: Features

  • Alternating left/right timeline layout with a central gradient line
  • Configurable history range (in hours)
  • Global limit for the number of events shown
  • Per-entity configuration (name, icons, colors, status labels, filters)
  • Localized relative time (e.g. “5 minutes ago”) or absolute datetime
  • Locale-based state translation with per-entity overrides
  • Optional auto-refresh interval (in seconds)
  • Live updates via WebSocket — timeline updates instantly without page refresh
  • Works with any entity that appears in Home Assistant history

You can install it via HACS

You can find all information and configuration options in the Repo.

Let me know what you think about it :blush:

13 Likes
2

Very nice idea to show entity state history in a more end-user friendly style.
Will definitely try this.

Also cool that you already implemented things like the possibility to map custom icons to states. :slightly_smiling_face::+1:

Greetings, from another Tobi :wink:

1 Like
3

@Thyraz Thanks!

Released a new version v1.1.0 including:

  • some fixes in styling
  • automatic multiline wrapping for long names/states via Card Option allow_multiline: true/false
  • French translations
  • Display the state in the style of the name if show_names: false is set
  • Added Options name_color: and state_color: Defineable card wide or per entity.
  • Register card in Home Assistant card picker
4

New Version released :tada:

:tada: The Card is now fully configurable via the Home Assistant UI editor


Latest changes:

  • Added support for collapsing consecutive duplicate events in history and live updates.
  • New overflow handling: show only the first N events, collapse the rest behind a toggle or switch to a scrollable container.
  • Added compact layout option to reduce vertical spacing.
  • Added en-US and en-GB locale files and improved German time suffixes.
  • Brazilian Portuguese translations added
  • Entity filtering extended with exclude_states; states can now show attributes.unit_of_measurement suffixes.
  • Docs: new browser_mod v2 popup example and refreshed README.
2 Likes
5

Hi there – this card is great for showing open/close history on the front door. Is there an option for widening the event detail box. I use combo status info (eg. Door Closed and Locked) and I find that the text is cut short.