Skip to content
πŸ“ Templatable Lovelace Configurations
TypeScript JavaScript
Branch: master
Clone or download
Latest commit a458226 Nov 19, 2019

Config Template Card Card

πŸ“ Templatable Configuration Card

GitHub Release License hacs_badge

Project Maintenance GitHub Activity

Discord Community Forum

Twitter Github

This card is for Lovelace on Home Assistant that allows you to use pretty much any valid Javascript on the hass object in your configuration


Hey dude! Help me out for a couple of 🍻 or a β˜•οΈ!



Use HACS or follow this guide

  url: /local/config-template-card.js
  type: module


Name Type Requirement Description
type string Required custom:config-template-card
card object Required Card object
entities list Required List of entity strings that should be watched for updates
variables list Optional List of variables, which can be templates, that can be used in your config and indexed using vars

Available variables for templating

Variable Description
this.hass The hass object
states The states object
user The user object
vars Defined by variables configuration and accessible in your templates starting at the 0th index as your firstly defined variable to help clean up your templates
type: "custom:config-template-card"
  - states['light.bed_light'].state
  - states['cover.garage_door'].state
  - light.bed_light
  - cover.garage_door
  - alarm_control_panel.ha_alarm
  - climate.ecobee
  type: "${vars[0] === 'on' ? 'custom:hui-glance-card' : 'custom:hui-entities-card'}"
    - entity: alarm_control_panel.ha_alarm
      name: "${vars[1] === 'open' && states['alarm_control_panel.ha_alarm'].state === 'armed_home' ? 'Close the garage!' : ''}"
    - entity: binary_sensor.basement_floor_wet
    - entity: climate.ecobee
      name: "${states['climate.ecobee'].attributes.current_temperature > 22 ? 'Cozy' : 'Too Hot/Cold'}"
    - entity: cover.garage_door
    - entity: "${vars[0] === 'on' ? 'light.bed_light' : 'climate.ecobee'}"
      icon: "${vars[1] === 'open' ? 'mdi:hotel' : '' }"

Note: All templates must be enclosed by ${} and card type must custom even for core. e.g. custom:hui-shopping-list-card



Fork and then clone the repo to your local machine. From the cloned directory run

npm install && npm run build

You can’t perform that action at this time.