Home

Awesome

Lovelace HTML Jinja2 Template card

hacs_badge Community Forum<!-- piotrmachowski_support_badges_start --> Ko-Fi buycoffee.to PayPal.Me Revolut.Me

<!-- piotrmachowski_support_badges_end -->

This card displays provided Jinja2 template as an HTML content of a card. It uses exactly the same engine as Home Assistant in Developer tools.

Configuration options

KeyTypeRequiredDefaultDescription
titlestringfalse-Title of a card
contentstringtrue-Content of a card
ignore_line_breaksbooleanfalsefalseDisables changing line breaks to </br> tags
do_not_parsebooleanfalsefalseDisables template parsing
always_updatebooleanfalsefalseEnables refreshing the card with every change of entity
picture_elements_modebooleanfalsefalseEnables picture-elements mode
entitieslistfalse[]List of additional entities whose updates should trigger refresh of the card

Templates

Example usage

Example

views:
- name: Example
  cards:
    - type: custom:html-template-card
      title: 'HTML Template card'
      ignore_line_breaks: true
      content: |
        Sun state: <b>{{ states('sun.sun') }}</b>, elevation: {{ state_attr('sun.sun','elevation') }}</br>
        <b>Hello</b> there!<p>General <u>Kenobi!</u></p>
        <img src="https://i.redd.it/ltxppihy4cyy.jpg" width="70%"/></br>
        <ha-icon icon="mdi:speaker"></ha-icon> Volume: {{ states('input_number.system_volume') }}%</br>
        <center><img src="https://vignette.wikia.nocookie.net/starwars/images/f/fa/Modal_Nodes_02.jpg" width="{{ states('input_number.system_volume') }}%"/></center>

Manual Installation

  1. Download html-template-card.js to /www/custom_lovelace/html_template_card directory:
    mkdir -p www/custom_lovelace/html_template_card
    cd www/custom_lovelace/html_template_card/
    wget https://github.com/PiotrMachowski/Home-Assistant-Lovelace-HTML-Jinja2-Template-card/raw/master/dist/html-template-card.js
    
  2. Add card to resources in ui-lovelace.yaml or in raw editor if you are using frontend UI editor:
    resources:
      - url: /local/custom_lovelace/html_template_card/html-template-card.js
        type: js
    

Hints

<!-- piotrmachowski_support_links_start -->

Support

If you want to support my work with a donation you can use one of the following platforms:

<table> <tr> <th>Platform</th> <th>Payment methods</th> <th>Link</th> <th>Comment</th> </tr> <tr> <td>Ko-fi</td> <td> <li>PayPal</li> <li>Credit card</li> </td> <td> <a href='https://ko-fi.com/piotrmachowski' target='_blank'><img height='35px' src='https://az743702.vo.msecnd.net/cdn/kofi3.png?v=0' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a> </td> <td> <li>No fees</li> <li>Single or monthly payment</li> </td> </tr> <tr> <td>buycoffee.to</td> <td> <li>BLIK</li> <li>Bank transfer</li> </td> <td> <a href="https://buycoffee.to/piotrmachowski" target="_blank"><img src="https://buycoffee.to/btn/buycoffeeto-btn-primary.svg" height="35px" alt="Postaw mi kawÄ™ na buycoffee.to"></a> </td> <td></td> </tr> <tr> <td>PayPal</td> <td> <li>PayPal</li> </td> <td> <a href="https://paypal.me/PiMachowski" target="_blank"><img src="https://www.paypalobjects.com/webstatic/mktg/logo/pp_cc_mark_37x23.jpg" border="0" alt="PayPal Logo" height="35px" style="height: auto !important;width: auto !important;"></a> </td> <td> <li>No fees</li> </td> </tr> <tr> <td>Revolut</td> <td> <li>Revolut</li> <li>Credit Card</li> </td> <td> <a href="https://revolut.me/314ma" target="_blank"><img src="https://www.revolut.com/favicon/android-chrome-192x192.png" height="35px" alt="Revolut"></a> </td> <td> <li>No fees</li> </td> </tr> </table> <!-- piotrmachowski_support_links_end -->