Config Template Card

When using config-template-card inside a picture-elements card or as a wrapper:

1. The style object inside the element configuration is applied to the element itself.
2. The style object inside the config-template-card configuration is applied to the surrounding card.

Note: For picture-elements elements, you must configure top and left attributes on the config-template-card to position it correctly.

type: picture-elements
image: http://example.com/image.jpg
elements:
  - type: 'custom:config-template-card'
    variables:
      - states['light.bed_light'].state
    entities:
      - light.bed_light
    element:
      type: icon
      icon: "${vars[0] === 'on' ? 'mdi:home' : 'mdi:circle'}"
      style:
        '--paper-item-icon-color': '${ states['sensor.light_icon_color'].state }'
    style:
      top: 47%
      left: 75%

To avoid repeating variable definitions in every card, you can define them once for the entire dashboard using the config_template_card_vars key at the dashboard level.

Both arrays and objects are supported. If you mix types (e.g., an array in dashboard variables and an object in a card), the dashboard variables are placed first in the vars array. If both are arrays, dashboard variables occupy the first indices of vars in the card.

title: My dashboard

config_template_card_vars:
  - states['sensor.light'].state

views:

You can install this card using HACS or by manually adding it as a resource in your Home Assistant configuration.

To install manually, add the following to your resources configuration:

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

The custom:config-template-card requires specific configuration keys to function. Use entities to tell the card which Home Assistant entities to watch for changes so the templates can re-evaluate.

You can define complex logic or reusable functions within the variables block. This allows you to call these functions anywhere within the scope of the card.

type: 'custom:config-template-card'
  variables:
    setTempMessage: |
      temp => {
        if (temp <= 19) {
            return 'Quick, get a blanket!';
        }
        else if (temp >= 20 && temp <= 22) {
          return 'Cozy!';
        }
        return 'It\'s getting hot in here...';
      }
    currentTemp: states['climate.ecobee'].attributes.current_temperature
  entities:
    - climate.ecobee
  card:
    type: entities
    entities:
      - entity: climate.ecobee
        name: '${ setTempMessage(currentTemp) }'

You can apply dynamic CSS styles to the wrapped element or the card itself using the style key. The style object is evaluated for templates just like the card configuration, allowing you to change visual properties based on entity states.

• If using element mode, styles can be applied to the element itself or the wrapper container.
• Styles are applied via element.style.setProperty.

config-template-card:
  element:
    type: state-badge
    entity: light.living_room
  style:
    "--paper-item-icon-color": "${states['light.living_room'].state === 'on' ? 'yellow' : 'grey'}"
  entities:
    - light.living_room

When writing templates inside ${} blocks, you have access to the following objects:

• this.hass: The Home Assistant hass object.
• states: The Home Assistant states object.
• user: The Home Assistant user object.
• vars: An object or array containing the variables defined in your variables configuration.
  • If variables is a list, vars is an array (e.g., vars[0]).
  • If variables is an object, vars is a string-indexed map, and you can also access variables directly by their name.