📝 100% Templatable Lovelace Configurations

:tada: Lovelace Templates :tada:

I’ve gone and made a crazy card that allows you to pretty much template anything in Lovelace for your card configurations using any information available on the frontend; states, attributes, user, etc.

Want state/attribute-based icons? DONE!
Want dynamic stacks; vertical vs horizontal based on user? DONE!
Want OR conditionals? DONE!

The list is pretty much endless and I’m sure you all will come up with some crazy stuff. Be sure to share.

Go nuts! Enjoy!

Lovelace card-templater card (Jinja2 card templating in Lovelace!)
Lovelace badge+notification banner
Lovelace: Mini Media Player
Applying themes to cards based on conditions
0.93: Essent, AmbiClimate, VS Code debugging
Lovelace: Mini Media Player
Lovelace Card and Jinja
Use Input Select in Lovelace Config
Change icon for cover open and closed
Frontpage change away
Url from sensor
If else conditions in tap_action on lovelace picture element card
Picture-glace template image
Using Jinja2 templates in Lovelace
Template as image URL in picture elements card
Templates in customize.yaml
Select media player for my button
Dynamic parameter in lovelace config
Dynamic image from sensor value
Lovelace: Check Button Card
How to change icon on glance based on state
Show all attributes on card
Error on taking camera snapshot
Venetian Blind Icons
Lovelace with state-dependant colors
Webpage card for Qlocktwo
Can't activate scene selected from input_select
[solved] Change icon, use 2 different (based on state) with custom:config-template-card?
Been wracking my head for the last little while on this one: " expected float for dictionary value @ data['value'] "
Lovelace: Bar Card
Glance Card - Different State Icons
Help! Failed to call service climate/set_hvac_mode. required key not provided @ data['hvac_mode']
Icon color setting does not work. Why?
Picture-entity card running script but which state depends on another entity state
Toggle Button Control Row Plugin
Entity Pictures as Group Icons
Set cover position based on current position
Lovelace - Actions - Use dynamic values for confirmation text
Frontend-only variable
Template variable in script call
Cache Image of last activity from camera
Templated card title
Start a timer with a given number of minutes / dynamic duration
Open only Closed Covers vice a versa
Picture Card with dynamic picture given by an entity
"mini-graph-card" & "history-graph": using a decluttering template
"mini-graph-card" & "history-graph": using a decluttering template
Other ways to write 'on' / 'off'
Dynamic page view titles. Possible?
Choosing random effect for light from list?
Lovelace: mini graph card
Dynamic selection of which entity to show using a template (in lovelace dashboard)
Dashboard with dynamically background
How to reset a input.datetime as a service-call
ApexCharts card - A highly customizable graph card
Variable value as card title
Correct template code
Picture entity card templating
FSR - the best bed occupancy sensor
Input_select value in "media_player_play_media" "entity_id"
I like to create a Gauge severity based on other sensor data
Change text of "title" in header of entities card when toggled?
Customise light icon
Service data template not evaluating when being passed to a called script
Compass Card - Points you in the right direction :compass:
Is there a way to use an input_number as variable for gauge card segments?
🔋 Lovelace: Battery state card
Changing entity name to entity output
Dynamic 'name' for state
Why can't I templatise actions on lovelace
Lovelace: Mini Media Player
Lovelace: Flexible Horseshoe Card (Donut graph, flexible layout, multiple entities, actions & animations), including next-gen experimental examples
🔹 Card-mod - Add css styles to any lovelace card
Daily consumption card from P1 slimme meter
Lovelace refreshs every second
Change the attribute of a sensor through automation?
ApexCharts card - A highly customizable graph card
Looking to make a weather forecast card from sensors, but I need to figure out days of the week
Picture-elements - state_image conditional on different entity?
Lovelace: Swiper card
Lovelace: Mini Media Player
📰 Lovelace: RSS Feed Parser Plugin/List Card
Change a Sensor Icon color - Very confused
Change Icon when state changes on Binary Sensor
Change automation entity icon based on state on or off
Change Icon when state changes on Binary Sensor
Conditional Card Template and Sensor Lacks State
[Solved] Customize scene icon color in Picture Glance Card
Switch Template: use a template for the "Display Name" as well
[SOLVED] Music fade out script with variables from lovelace
Use Text Helper as Name in a Button
Lovelace card-templater card (Jinja2 card templating in Lovelace!)
Sending Variables to a script from a lovelace button, script receives "0" no matter what
Change Icon when state changes on Binary Sensor
Is it possible to use dynamic name in E.g. sensor card

Looks very promising! Gonna check it out this afternoon.
Maybe we should get a git for collecting templates, I expect the examples to number in size within weeks!

1 Like

This sounds amazing, having custom cards like this instead of a buttload of template sensors, and my TV and Xbox can finally say on/off instead of home/away :). Is it also possible to colorize the icons, and have more than two options, say three possible “states” depending on sensor value? Looking forward to seeing some more examples of usage.

If you can explicitly do it in the config for a card for 1 scenario, you can template it out. That’s all I can say about it. It takes ANY valid javascript and has access to the this.hass object.

F#&@ing awesome thanks @iantrich

Love to see some examples of this card in action…

1 Like

Amazing! Now I can get rid of a whole bunch of template sensors I’m only using for my front end. :grinning:

very interesting, I’m looking forward to seeing some example and scenarios thrown around for this

This looks good. I’m keen to see more examples to get a better understanding for how to use this.

That is amazing! I was looking for something like this a few days ago!
Now I don’t remember for what, but it is absolutely good to have this option now :smiley:

Would you mind point me to the right direction in this scenario?

              - type: entities
                title: House Members
                show_header_toggle: false
                  - entity: person.andrea
                    type: "custom:secondaryinfo-entity-row"
                    secondary_info: "OnePlus 5 Battery: [[ sensor.andrea_oneplus5_battery ]]%"

What I would like to do i add a “- Charging” if binary_sensor.andrea_oneplus5_charging is true.
The templating is not the problem here, my issue is, where do I put the “type: custom:config-template-card” bit in this scenario?

Thanks :slight_smile:

Everything you have here would go under “config” after you fix the template

gonna be looking at your config after you have been let loose with this card

1 Like

Any way to get a better example? I can’t seem to figure it out for some reason…maybe I just haven’t gotten enough sleep…

Figured it out. In the documentation, you have

  - type: custom:config-template-card
      type: entity-button
      name: "${this.hass.states['media_player.office'].state === 'playing' ? 'Rocking' : 'Not Rocking'}"
      icon: "${this.hass.states['media_player.office'].state === 'playing' ? 'mdi:music' : 'mdi:sleep'}"

But I think card: should be config: ?

I think this has a lot of potential. It would be interesting to apply this concept over to templating entity rows.

Nice one Ian! :clap: :tada:

1 Like

I got it to work using the below config. Readme needs to be updated.

- type: 'custom:config-template-card'
    type: 'custom:hui-entity-button-card'
    name: "${this.hass.states['media_player.office'].state === 'playing' ? 'Rocking' : 'Not Rocking'}"
    entity: media_player.office
    icon: "${this.hass.states['media_player.office'].state === 'playing' ? 'mdi:music' : 'mdi:sleep'}"

If only there was some way for anyone to submit proposed changes… :thinking:


Part of being open source is having people contribute back. If you think a push towards having someone do that for the good of the community, then, well… :woman_shrugging:


I tried this hours ago and could not for the life of me get it to work, I’m glad I wasn’t the only one and thanks to those of you who worked out how ‘off’ the readme was because I tried loads of things to no avail.

This looks like being an amazingly useful card! Thank you.

really nice work and really useful for many case scenario in my setup working on them and i will post examples here and submit them after on your Git. Thank you again for that wonderful card

I was able to have the ‘circle-sensor-card’ working with non numerical sensor, it absolutely needs a numerical state for the color change. So i made a 3 state color change here is the code i use.
(this is how the lovelace editor conform it)

On Clear it is green, on Warning it is yellow and Emergency red

type: 'custom:config-template-card'
  entity: sensor.co
  name: CO
  show_card: true
  stroke_width: 20
  fill: 'rgba(100,100,100,0.0)'
  type: 'custom:circle-sensor-card'
  stroke_color: >-
    ${this.hass.states['sensor.co'].state === 'Clear' ? '#55f26e' :
    this.hass.states['sensor.co'].state === 'Warning' ? '#e8e400' : '#d30000'}

c e w

1 Like