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:

11 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