Skip to content
Declutter your lovelace configuration with the help of this card
TypeScript JavaScript Shell
Branch: master
Clone or download
Latest commit 99c8033 Jan 5, 2020

Decluttering Card

📝 Reuse multiple times the same card configuration with variables to declutter your config.

GitHub Release GitHub Activity custom_updater License

Project Maintenance

Discord Community Forum


This card is for Lovelace on Home Assistant.

We all use multiple times the same block of configuration across our lovelace configuration and we don't want to change the same things in a hundred places across our configuration each time we want to modify something.

declutterring-card to the rescue!! This card allows you to reuse multiple times the same configuration in your lovelace configuration to avoid repetition and supports variables and default values.


Defining your templates

First, you need to define your templates.

The templates are defined in an object at the root of your lovelace configuration. This object needs to be named decluttering_templates.

This object needs to contains your templates declaration, each template has a name and can contain variables. A variable needs to be enclosed in double square brackets [[variable_name]]. It will later be replaced by a real value when you instanciate a card which uses this template. If a variable is alone on it's line, enclose it in single quotes: '[[variable_name]]'.

You can also define default values for your variables in the default object.

    default:  # This is optional
      - <variable_name>: <variable_value>
      - <variable_name>: <variable_value>
    card:  # This is where you put your card config (it can be a card embedding other cards)
      type: custom:my-super-card

Example in your lovelace-ui.yaml:

  - url: /local/decluttering-card.js
    type: module

  my_first_template:     # This is the name of a template
      - icon: fire
      type: custom:button-card
      name: '[[name]]'
      icon: 'mdi:[[icon]]'

  my_second_template:    # This is the name of another template
      type: custom:vertical-stack-in-card
        - type: horizontal-stack
            - type: custom:button-card
              entity: '[[entity_1]]'
            - type: custom:button-card
              entity: '[[entity_2]]'

Using the card

Name Type Requirement Description
type string Required custom:decluttering-card
template object Required The template to use from decluttering_templates
variables list Optional List of variables and their value to replace in the template

Example which references the previous templates:

- type: custom:decluttering-card
  template: my_first_template
    - name: Test Button
    - icon: arrow-up

- type: custom:decluttering-card
  template: my_first_template
  variables: Default Icon Button

- type: custom:decluttering-card
  template: my_second_template
    - entity_1: switch.my_switch
    - entity_2: light.my_light


Step 1

Save decluttering-card to <config directory>/www/decluttering-card.js on your Home Assistant instanse.


mv decluttering-card.js /config/www/

Step 2

Link decluttering-card inside your ui-lovelace.yaml or Raw Editor in the UI Editor

  - url: /local/decluttering-card.js
    type: module

Step 3

Add a custom element in your ui-lovelace.yaml or in the UI Editor as a Manual Card


See this guide: Troubleshooting


Fork and then clone the repo to your local machine. From the cloned directory run

npm install && npm run build

You can’t perform that action at this time.