Skip to content
πŸ“ Templatable Lovelace Configurations
TypeScript JavaScript
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist dist for first render fix Apr 29, 2019
src Fix error during the first render Apr 29, 2019
.eslintrc.yaml "Functional" Mar 12, 2019
.gitignore dist for first render fix Apr 29, 2019
.nvmrc Initial commit Mar 11, 2019
LICENSE πŸŽ‰ We're in business Mar 13, 2019 Update Apr 19, 2019
package.json dist for first render fix Apr 29, 2019
rollup.config.js πŸš€ Introducing variables Mar 20, 2019
tsconfig.json Initial commit Mar 11, 2019
yarn.lock dist for first render fix Apr 29, 2019

Config Template Card Card

πŸ“ Templatable Configuration Card

GitHub Release GitHub Activity custom_updater License

Project Maintenance BuyMeCoffee

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


Name Type Requirement Description
type string Required custom:config-template-card
card object Required Card object
entities list Optional 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


Step 1

Save config-template-card to <config directory>/www/config-template-card.js on your Home Assistant instanse.


mv config-template-card.js /config/www/

Step 2

Link config-template-card inside your ui-lovelace.yaml or Raw Editor in the UI Editor

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

Step 3

Add a custom element in your ui-lovelace.yaml or in the UI Editor as a Manual Card

Available variables for tempalting

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.