How do I create a card that changes color based on temperature in Config Template Card?

Define a variable for the temperature sensor state, then use a JavaScript template in the `style` or `icon` properties to conditionally set colors. For example, check if the temperature is above a threshold and apply different CSS styles accordingly.

Config Template Card vs standard entities card: which is better for dynamic layouts?

Config Template Card excels with logic-driven changes like conditional entities or styles using JavaScript, while standard entities cards are simpler for static lists. Use Config Template Card when you need real-time, template-based updates.

How to share variables between multiple cards on a dashboard?

Use dashboard-wide variables by defining them in the dashboard configuration under `config_template_card_vars`, as mentioned in the README. This allows reuse across all cards without duplicating code in each card's variables.

What happens if my JavaScript template has a syntax error?

The card may fail to render or display incorrectly, and errors won't be obvious in Lovelace. You'll need to open the browser's developer console to see JavaScript error messages for debugging.

Can I use Config Template Card with HACS for easy installation?

Yes, it's listed as a default repository in HACS, so you can install and update it directly through the HACS interface in Home Assistant, as indicated by the HACS badge in the README.

How to update the UI only when specific entities change?

List the entity IDs in the `entities` configuration option; the card watches these and triggers updates only when their states change, optimizing performance by avoiding unnecessary refreshes.

Is Config Template Card good for beginners in Home Assistant?

No, it's aimed at advanced users comfortable with JavaScript and YAML. Beginners might find it overwhelming compared to built-in cards with simpler configuration options.

Open-Awesome

Config Template Card

MITTypeScript1.3.6

A Lovelace card for Home Assistant that enables dynamic UI configurations using JavaScript templates.

GitHub

558 stars64 forks0 contributors

What is Config Template Card?

Config Template Card is a custom Lovelace card for Home Assistant that enables dynamic dashboard configurations using JavaScript templating. It allows users to create conditional card layouts, styles, and content based on real-time entity states, solving the limitation of static Lovelace configurations.

Target Audience

Home Assistant users and dashboard designers who want to create more interactive, responsive, and logic-driven Lovelace interfaces without writing full custom cards.

Value Proposition

It provides unparalleled flexibility within Home Assistant's Lovelace ecosystem by allowing JavaScript templating directly in YAML configurations, enabling complex conditional logic and dynamic updates that aren't possible with standard cards.

Overview

📝 Templatable Lovelace Configurations

Use Cases

Best For

Creating conditional Lovelace cards that change based on entity states
Building dynamic dashboards with real-time updates
Simplifying complex Lovelace configurations with reusable variables
Adding JavaScript logic to Home Assistant UI without custom card development
Creating responsive picture-elements with templated styles and positions
Sharing variables and functions across multiple dashboard cards

Not Ideal For

Users who prefer visual, drag-and-drop dashboard builders over code-based configurations
Home Assistant installations running versions below 0.110.0 due to minimum version requirements
Projects prioritizing strict YAML validation and safety without embedded JavaScript execution
Beginners or teams without JavaScript proficiency seeking plug-and-play Lovelace components

Pros & Cons

Pros

Dynamic JavaScript Templating

Allows embedding JavaScript expressions within `${}` in YAML, enabling conditional card configurations based on real-time entity states, as shown in examples that switch card types or labels.

Reusable Variables and Functions

Supports local and dashboard-wide variables, plus global JavaScript functions defined in variables to avoid repetitive logic, simplifying complex templates across multiple cards.

Flexible Integration Options

Can function as a card, row, or element within other Lovelace cards like picture-elements, providing versatile layout possibilities without custom development.

Automatic Real-time Updates

Watches specified entities in the `entities` list and updates the UI automatically on state changes, ensuring dashboards stay current without manual refreshes.

Cons

JavaScript Knowledge Required

Users must be proficient in JavaScript to write effective templates, creating a barrier for those only familiar with basic YAML or visual tools.

Complex Debugging and Errors

JavaScript errors in templates can break dashboards silently, and troubleshooting requires browser console checks, with the README only linking to external guides for help.

Performance Overhead Concerns

Real-time monitoring of multiple entities and JavaScript execution may introduce latency, especially in resource-constrained Home Assistant setups.

Version and Ecosystem Lock-in

Tied to Home Assistant 0.110.0+ and the Lovelace ecosystem, limiting use in older installations or standalone projects outside this environment.

Frequently Asked Questions

Related Projects

Mini Graph Card

Minimalistic graph card for Home Assistant Lovelace UI

Stars3,859

Forks265

Last commit22 hours ago

Button card

❇️ Lovelace button-card for home assistant

Stars2,468

Forks278

Last commit4 days ago

Vacuum Map Card

This card provides a user-friendly way to fully control map-based vacuums in Home Assistant. Supported brands include Xiaomi (Roborock/Viomi/Dreame/Roidmi/Valetudo/Valetudo RE), Neato, Wyze, Roomba, Ecovacs (and probably more).

Stars1,913

Forks275

Last commit1 month ago

Auto-Entities Card

🔹Automatically populate the entities-list of lovelace cards

Stars1,778

Forks136

Last commit2 months ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub