Skip to content

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.

License

Notifications You must be signed in to change notification settings

PiotrMachowski/Home-Assistant-Lovelace-HTML-Jinja2-Template-card

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Lovelace HTML Jinja2 Template card

hacs_badge Community Forum Ko-Fi buycoffee.to PayPal.Me Revolut.Me

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

Key Type Required Default Description
title string false - Title of a card
content string true - Content of a card
ignore_line_breaks boolean false false Disables changing line breaks to </br> tags
do_not_parse boolean false false Disables template parsing
always_update boolean false false Enables refreshing the card with every change of entity
picture_elements_mode boolean false false Enables picture-elements mode
entities list false [] List of additional entities whose updates should trigger refresh of the card

Templates

  • Entity state, example: {{ states('sun.sun') }}
  • Entity attribute, example: {{ state_attr('sun.sun', 'elevation') }]
  • Detailed documentation: Templating

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

  • To use mdi icon follow example: <ha-icon icon="mdi:weather-sunny"></ha-icon>.
  • If content does not contain any template use flag do_not_parse: true to increase performance.
  • If content does not contain entity id (e.g. because of loop) you have to provide it manually in entities to enable refresh of the card when it will be updated.
  • If you want to enable refreshing for every change in HA use flag always_update: true. WARNING: this may cause heavy load of browser/HA. Best to use with flag do_not_parse: true.
  • To check if your content is correct without changing configuration use Developer tools.
  • To use this card as an element of picture-elements card use picture_elements_mode parameter.

Support

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

Platform Payment methods Link Comment
Ko-fi
  • PayPal
  • Credit card
  • Buy Me a Coffee at ko-fi.com
  • No fees
  • Single or monthly payment
  • buycoffee.to
  • BLIK
  • Bank transfer
  • Postaw mi kawę na buycoffee.to
    PayPal
  • PayPal
  • PayPal Logo
  • No fees
  • Revolut
  • Revolut
  • Credit Card
  • Revolut
  • No fees
  • About

    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.

    Topics

    Resources

    License

    Stars

    Watchers

    Forks

    Packages

    No packages published