📝 100% Templatable Lovelace Configurations

Man, how can I buy you coffee (rather a jar of it…)? That’s a great tool for tinkers! I struggled a little at first due to lack of error handling but F12 works :slight_smile:
The link you provided for coffee delivery ends up with 404 html error. And a coffee’s getting cold…

Hi, still kind of new to this, but I’m having an issue trying to use a variable as a threshold in Apex charts. Below my code, but I keep getting the following error below. Not sure why it keeps thinking that the MIN and LIMIT variable are not a number. Any help is much appreciated.

type: custom:config-template-card
  MIN: states['sensor.tibber_lowest_energy_price_today'].state
  LIMIT: states['sensor.electricity_price_limit_1'].state
  - sensor.tibber_lowest_energy_price_today
  - sensor.electricity_price_limit_1
  - sensor.electricity_price_limit_2
  - sensor.electricity_price_limit_3
  - sensor.tibber_highest_energy_price_today
  type: custom:apexcharts-card
  update_interval: 5m
  graph_span: 2d
    start: day
    show: true
    label: Now
    show: true
    title: Stroomprijs vandaag (€/kWh)
    color_threshold: true
    - entity: sensor.tibber_average_electricity_price_today
      stroke_width: 2
      float_precision: 3
      type: column
      opacity: 1
        - value: LIMIT
          color: green
        - value: 0.1
          color: green
        - value: 0.2
          color: green
        - value: 0.25
          color: orange
        - value: 0.3
          color: red
        - value: 1
          color: red
      data_generator: |
        return entity.attributes.prices.map((record, index) => {
          return [record.time, record.price];
    - id: Prijs
      decimals: 3

value: '${LIMIT}


value: '${parseFloat(LIMIT)}

Thank you very much! Still trying to get my head around this.

value: '${parseFloat(LIMIT)}'

This did the trick

Is there any way to consult on this solution outside of the main forum?
I’m sorry for asking this, but I miss some background information here.
I tried to create such an iframe card, but did not succeed.
Earlier I successfully used iframe card to play video from YouTube in Lovelace card, but I would prefer everything to be able to run offline, therefore I’m looking for a solution for playing local video file in a Lovelace card.
Obviously, Home Assistant does not focus on this functionality at all. And I still did not find good reliable working solution.
The solution you proposed here looks simple, but did not work for me, therefore I would like to understand what I miss.

I’m traveling now on vacation and can spare a minute to give some help. It would be helpful for me or anyone else watching this thread to see your latest code posted. Maybe the problem is the iFrame link to your video file isn’t using https if your HA is set up for SSL.

You might also consider looking into using the custom Gallery Card or the Frigate card.

1 Like

Hi everyone.

I have this markdown card showing just fine:

  - type: custom:config-template-card
      type: markdown
      content: >
        Hello, somebody

How exactly can I use custom:config-template-card to show the logged in user name instead of that “somebody”? I’ve tried a million things and nothing seems to work…

Can I just reference ${ user } directly in the content? Or do I need to add it entities first? Or to variables? Or both?

  - type: custom:config-template-card
      - THEUSER: user.name
      - user.name
      type: markdown
      content: >
        Hello, ${THEUSER}

:point_up: that doesn’t work, nothing shows, not even an error.

Any ideas? Any logs I can check to learn more? Thanks!

In general, there are ZERO reasons to place markdown inside CTC.
Markdown itself supports jinja.
Just make a jinja template with

{{ user }}

Thanks for your quick reply. It’s just an example! I am just trying to figure out how to use config-template-card. I will use it for many other things, but I am having trouble getting started.

[Any way, I do have some challenges with my current Jinja inside a markdown card. It doesn’t always work, sometimes it seems to have trouble reading sensor values, or even user names. It’s like sometimes the card can’t find the information, other times it can. But that’s for another thread]

Can you help me get a working card showing the user name, from inside config-template-card? Thanks


type: custom:config-template-card
  - sun.sun
  type: entities
  title: ${"Hello, " + user.name}
    - sun.sun
1 Like

Ok… but just so I understand what is going on…

What is different about your example? Why wouldn’t the same work for the markdown card?

I was thinking that config-template-card would simply…

  • get the config for the child card and do a bunch of expression evaluations
  • pass that evaluated config into the child card, whatever card it was

But that doesn’t seem to be the case, or is it?

The docs try to teach by example, but I would prefer to have a generic statement of what it does, and how each piece fits the total…

type: custom:config-template-card
  - sun.sun
  type: markdown
  content: ${"Hello, " + user.name}

I intentionally did not provide an example with markdown since this might teach beginners in a wrong way - markdown does NOT need to be placed inside CTC since it supports jinja itself.

Yes, CTC:

  1. Listening to “monitored” entities (btw the “entities” option is mandatory).
  2. On every change of any of these entities (state or attributes):
  • recalculates variables defined in “variables” section;
  • recalculates variables in an inner card’s code (if they present);
  • redraws the whole inner card (which might be not good in some cases).
1 Like

So another example. This works:

          type: custom:circular-timer-card
          entity: timer.30m_timer
          bins: 30
          layout: minimal
          color_state: true    

Shouldn’t this work?

      - type: custom:config-template-card
          - timer.30m_timer
          type: custom:circular-timer-card
          entity: "timer.${15*2}m_timer"
          bins: 30
          layout: minimal
          color_state: true    

It doesn’t…

This one is a more real example where I am actually trying to achieve something. I want to have separate timers per user. So if I can get that example working with the evaluated expression, my plan is to move on to creating more timers and referencing them as timer.30m_timer_${user.name}

Thank you for your patient explanations. They are really helpful.

You (currently) cannot place templates INSIDE a string, the whole string must be a template.

entity: >-
  ${ 'timer.' + 15*2 + 'm_timer' }

Thank you, that is the bit I was missing, and it was really confusing all my experiments! Now it works, yay :tada:

I will try to update the docs of this card on GitHub in the coming days.

I am new to this card, But desperately want to get it going. Just to start with the below template expression is not getting evaluated.

type: custom:config-template-card
  Message: Test Message
  - input_text.tp_link_controller_clients_json
  type: button
  show_name: true
  show_icon: true
  entity: input_text.tp_link_controller_clients_json
  name: ${'text_'+'User' }
    action: call-service
    service: script.omada_command_execute
      command: aaa

because a variable is defined in a wrong way.

I’ve noticed an error in the logs, is this an issue/will it be an issue in the future? Or should we just ignore it?

The main 'lit-element' module entrypoint is deprecated.
Please update your imports to use the 'lit' package: 'lit' and
'lit/decorators.ts' or import from 'lit-element/lit-element.ts'.
See https://lit.dev/msg/deprecated-import-path for more information.

This is a very old issue. So far the CTC card still works even with these warnings.

I have something more complex. I’m trying to generate a list of cards dynamically using CTC. I know, it’s a little bit extreme but just trying to find the limits.
Here’s an example (just proof of concept):

    type: custom:config-template-card
      get_card: |
        x => {
          let entities = [];  
          let card = {
            "type": "entities",
            "entities": entities
          return card;
    card: ${ get_card(0) }

Yeah, crazy. And not working :frowning: I’m creating an json object in js with right properties but the error message says: No card type defined I may even format the json object in an invalid way - the message stays the same.
Did you happen to see o think about something so dynamic?