Defining Templates

A template is a named, reusable piece of dashboard content with holes in it. There are two places to define one, and you can use both on the same dashboard.

Both produce exactly the same thing. A template defined either way can be used by any card on that dashboard.

Method 1 — the decluttering_templates key

Add a decluttering_templates mapping at the root of the dashboard configuration — the same level as views:, not inside it.

Get there with ⋮ → Raw configuration editor while editing the dashboard.

decluttering_templates:
  room_light:
    card:
      type: tile
      entity: '[[light]]'
      name: '[[room]]'
      features:
        - type: toggle

  temperature_row:
    row:
      entity: '[[entity]]'
      name: '[[name]]'
      icon: mdi:thermometer

  power_badge:
    badge:
      type: entity
      entity: '[[entity]]'
      name: '[[name]]'
      show_name: true

views:
  - title: Home
    cards:
      - type: custom:decluttering-card-plus
        template: room_light
        variables:
          - light: light.living_room
          - room: Living Room

The shape is always:

decluttering_templates:
  <template name>:
    <card|badge|row|element>:
      # the content, with [[variables]] in it
    default:
      # optional fallback values
    style: |
      # optional CSS

If you keep your dashboard in YAML mode, this goes in your ui-lovelace.yaml (or whichever file that dashboard uses) and you can split it out with !include:

decluttering_templates: !include decluttering_templates.yaml

views: !include_dir_list views/

Method 2 — a template card

Add a Custom: Decluttering Template Plus card to any view — including inside a stack or a grid, if you would rather keep your definitions together. The card defines the template and is only visible while the dashboard is in edit mode — normal users never see it.

type: custom:decluttering-template-plus
template: quick_light
card:
  type: tile
  entity: '[[light]]'
  name: '[[room]]'
  features:
    - type: toggle
default:
  - light: light.living_room
  - room: Living Room

In edit mode it renders with a blue outline and its name in the corner, showing a preview built from the default values. From v1.10.0 the preview is built the way a card using the template would be: the dashboard’s, view’s and section’s decluttering_defaults apply, and a template that extends: another shows its parent too.

The card below it in that screenshot is an ordinary custom:decluttering-card-plus using the same template with different variables.

Leave edit mode and the outlined card disappears entirely, leaving no gap.

Template cards are found in any view of the dashboard, including inside the sections of a sections view — so you can keep them all together on a hidden “templates” view if you prefer.

See Visual Editors for building one of these by clicking rather than typing.

A template built on another: extends: (v1.8.0+)

When templates in a family differ by a line, extends: lets one start from another and say only what is different:

decluttering_templates:
  room_tile:
    default:
      - colour: amber
    card:
      type: tile
      entity: '[[entity]]'
      features: [{ type: toggle }]
  dim_tile:
    extends: room_tile
    default:
      - colour: slate          # only the difference
    card:
      color: grey              # merged into the parent's card

dim_tile is room_tile with a different default colour and one extra key on the card.

• Mappings merge key by key, child over parent, all the way down. Lists and single values are the child’s outright.
• Declarations merge by name — a child declaration of the same name replaces the parent’s in place, new ones follow on after.
• Defaults and let: stack, the child’s first, so its values win.
• A parent can itself extend another. A parent nobody defines leaves the child exactly as written, and two templates extending each other stop rather than loop.

It works the same with template cards: put extends: at the top level, beside template:. The parent can be a template card, in decluttering_templates:, or borrowed from another dashboard.

A template that is only ever extended counts as used, so dashboard health does not call it unused.

Template cards that extend another (v1.10.0+)

- type: custom:decluttering-template-plus
  template: lamp_tile
  default:
    - entity: light.kitchen
  card:
    type: tile
    entity: '[[entity]]'
    color: '[[colour]]'
    features:
      - type: toggle
- type: custom:decluttering-template-plus
  template: dim_lamp
  extends: lamp_tile
  default:
    - colour: grey

dim_lamp has no card of its own, and its preview is the whole tile. lamp_tile leaves colour to the dashboard’s decluttering_defaults: {colour: amber}, and its preview picks that up. Before v1.10.0, dim_lamp showed You must define one card… and lamp_tile previewed without its colour.

Grouping a big collection: category: (v1.8.0+)

room_tile:
  category: Lighting
  description: One tile per room.
  card: {}

The template picker shows it as Lighting · room_tile — One tile per room., and because the category leads the label, alphabetical order brings each category’s templates together. Worth it once a dashboard has more templates than fit on a screen.

Rules

One content type per template. A template must have exactly one of card, badge, row or element. Two of them, or none, and the card reports:

You must define one card, badge, element, or row in the template

Names must be unique. If the same name is defined twice on one dashboard, the last one found wins, and which that is depends on config order. Don’t do it.

Templates are per dashboard. A template defined on dashboard A is not visible to dashboard B unless B explicitly borrows it — see Sharing Templates Between Dashboards.

Naming. Anything valid as a YAML key works. snake_case is conventional and easy to read in the template dropdown.

Next

→ Using Templates — putting them on the dashboard → Variables — filling in the holes