Skip to content

Visual Editors

tempus2016 edited this page Aug 18, 2026 · 8 revisions

Visual Editors

Both cards have point-and-click editors, so you can build and use templates without writing YAML by hand.


The template editor

Add a Custom: Decluttering Template Plus card to a view (+ Add card, search declutter). Its editor has a tab strip:

The template editor Settings tab, with a live preview underneath

Settings

Field Meaning
Template to define The name other cards will use. Must be unique on the dashboard.
Type of thing to template Card, Badge, Row or Element. Switching this swaps the body for a starter of the new type.
Description What the template is for. Shown to whoever uses it, and carried with it when shared.
Variable declarations Descriptions of the variables the template takes, so cards using it get real controls. See Describing Variables.
Variables The template's default values, as a YAML list — - name: value per line.

Underneath is a live preview, outlined in blue and labelled with the template name, rendered from the defaults. Give every variable a default and the preview shows you what you are building as you type.

Card

When the type is Card, a second tab gives you Home Assistant's own card editor for the body:

The Card tab showing the standard tile card editor

You get the real editor for whichever card type you chose — entity pickers, feature pickers, interaction settings, the lot. Show code editor at the bottom left drops to YAML whenever the visual editor cannot express what you want, which is where you put your [[variables]].

"Unknown entity selected" is normal here. The entity field shows [[light]], which is a placeholder, not an entity. The editor does not know that. Ignore the warning — the preview below shows the real card built from your defaults.

Change card type

Swaps the template body for a different card type, using the standard card picker.

Row

When the type is Row, you get Home Assistant's row editor instead.

Badge and Element templates have no dedicated tab — edit them under Settings → Show code editor.

Turning a card you already have into a template

The hard part of the first conversion is deciding which parts of a card change between copies. The editor can work that out for you.

Put the card into the template — build it on the Card tab, or paste it in through Share — then press Suggest variables from the card on the Settings tab.

Every entity, name, title, heading and icon in it becomes a variable, described with the right control and defaulting to the value it replaced, so the template renders exactly what the card did until you pass something else in.

# before
card:
  type: vertical-stack
  cards:
    - {type: tile, entity: light.hall, name: Hall, icon: mdi:lamp}
    - {type: tile, entity: light.hall, name: Hall again}
# after
variables:
  - {name: entity, label: Entity, selector: {entity: {}}, default: light.hall}
  - {name: name,   label: Name,   selector: {text: {}},   default: Hall}
  - {name: icon,   label: Icon,   selector: {icon: {}},   default: 'mdi:lamp'}
  - {name: name_2, label: Name 2, selector: {text: {}},   default: Hall again}
card:
  type: vertical-stack
  cards:
    - {type: tile, entity: '[[entity]]', name: '[[name]]', icon: '[[icon]]'}
    - {type: tile, entity: '[[entity]]', name: '[[name_2]]'}
  • The same value in the same kind of place becomes one variable. light.hall appears twice above and is one thing to fill in, not two.
  • Values that are already variables are left alone, as are names the template already declares — so pressing it again after adding another card is safe.
  • A list of entities is left alone rather than half replaced.
  • Because it rewrites your card, it asks twice before doing anything.

Where used

Lists every view on this dashboard that uses the template and how many times, plus any other template that calls it.

Worth a look before changing a template, because what a change affects is not visible from the template card itself — the cards using it can be anywhere, including inside stacks, grids and conditional cards, all of which are counted. A template card defines rather than uses, so it is not counted.

Cards on other dashboards are not counted, even ones that borrow this dashboard's templates.


The card editor

Add a Custom: Decluttering Card Plus card to use a template:

The card editor with a template dropdown, variables field and live preview

Field Meaning
Template to use Dropdown of every template available to this dashboard, sorted. You can also type a name that does not exist yet.
Variables The values to substitute, as a YAML list — - name: value per line.
Repeat for each Render the template once per item. Card templates only. See Repeating a Template.
Columns How many copies sit side by side.

The preview updates as you type.

When the template describes its variables

If the template describes its variables, this editor looks quite different: its description appears at the top, and each variable gets a real control — an entity picker, a dropdown, an icon picker — with anything the template does not describe still editable in an Other variables box underneath.

The card editor showing an entity picker and a dropdown built from the template

It also warns about a variable the template uses that has no value anywhere, and about a value set here that the template never reads. Neither stops you saving.

The dropdown includes templates defined in decluttering_templates, templates defined as cards on any view, and templates borrowed from other dashboards. Borrowed ones appear a moment later, once the other dashboard has been read — the editor will not flag a template name as unknown while that is still in flight.

Validation

Message Cause
No template exists with this name Typo, or the template is on a dashboard you have not borrowed from
Variables must be a list of key and value pairs, or a mapping of them variables: or default: is something else entirely — a string, or a number
The declarations must be a list, each entry naming one variable A template's variables: block was written as a mapping. Declarations are a list, because each one names the variable it describes

Warnings, as opposed to errors, are listed under Describing Variables. None of them stop a save.


Editing rows and elements

Rows and picture elements have no card picker entry, so add them in YAML:

  1. Add (or open) an Entities or Picture Elements card.
  2. Click Show code editor.
  3. Add the entry to entities: or elements: as shown in Rows / Elements.

The template itself can still be built with the visual template editor.


When you would rather use YAML

Everything the editors do is plain configuration. ⋮ → Raw configuration editor on the dashboard gives you the whole thing at once, which is usually faster for defining several templates — see Defining Templates.


Defining Templates · Using Templates

The template editor's Share tab exports a template for someone else, and imports one they sent you — see Sharing a Template.

Clone this wiki locally