Material Home Assistant

Appearance

👨‍💻 Javascript Templates ​

NOTE

✨ Available on 💎 Pro & Ultimate Version Only

🌟 Overview ​

Javascript templates provide a powerful way to manipulate and display data in your cards. You can use them to perform complex calculations, create dynamic content, and much more.

🚀 How to use it ​

JavaScript templates can be used in almost any card field (refer to the card documentation for specific options). This feature evaluates a template string as JavaScript code using the [[[...]]] syntax.

Inside the template, you have access to the following variables:

  • entity: The entity object.
  • states: The states of all entities in Home Assistant.
  • hass: The Home Assistant object.
  • user: The user object.

✨ Examples ​

Example: show a different icon based on the entity state ​

This example shows how to use a Javascript template to display a different icon based on the state of a light.

yaml
type: "custom:material-button-card"
entity: "light.living_room"
icon: |
  [[[ 
      entity.state === "on" ? "mdi:lightbulb-on" : "mdi:lightbulb-off" 
  ]]]

Example: calculate the total power consumption ​

This example shows how to use a Javascript template to calculate the total power consumption of all lights.

yaml
type: "custom:material-button-card"
name: |
  [[[ 
      "Total Power: " + Object.values(states).filter(e => e.entity_id.startsWith("light.") && e.attributes.power).reduce((total, e) => total + e.attributes.power, 0) + "W" 
  ]]]

Example: show a greeting based on the time of day ​

This example shows how to use a Javascript template to display a different greeting based on the time of day.

yaml
type: "custom:material-button-card"
name: |
  [[[ 
      "Good " + (new Date().getHours() < 12 ? "Morning" : (new Date().getHours() < 18 ? "Afternoon" : "Evening")) 
  ]]]

🧩 Important Notes ​

NOTE

Check also icon