Decluttering Selector — get your decluttering-card templates into the native Add Card picker

[Quincarter]

First off, huge thanks to everyone who’s built and maintained decluttering-card over the years. Being able to define a card once as a template and reuse it everywhere with different variables has saved me an enormous amount of copy-pasting.

But I kept running into the same friction: once I’d defined a template, using it meant going back and forth between my dashboard and my raw configuration. I’d be in the visual editor wanting to drop in one of my templates, and there was nothing there for it. I’d have to remember the exact template name, switch to YAML, hand-type type: custom:decluttering-card, template: whatever-i-named-it, and hope I got the variables right.

So I FINALLY built Decluttering Selector. It doesn’t give you a visual editor for authoring your decluttering-card templates; you still define those the same way you always have. What it does is let you select them from the same “Add Card” dialog you already use for every other card, instead of digging through your raw configuration.

Add it once to a dashboard, and every decluttering_templates entry on that dashboard shows up as its own selectable card in the native picker, with a live preview. Click one and it inserts a fully pre-filled custom:decluttering-card for you.

How it works

• Reads decluttering_templates from the dashboard it’s placed on
• Registers each one into the native Add Card picker (name + live preview)
• Clicking a template inserts a pre-filled custom:decluttering-card
• Re-registers automatically whenever you save the dashboard, so new or renamed templates show up without a reload

It doesn’t fork the frontend or monkey-patch anything. It just uses the same window.customCards + customElements extension points every other custom card (Mushroom, button-card, etc.) already relies on.

Example

A dashboard with a bunch of templates defined:

…and here’s “Add Card” once Decluttering Selector is on that dashboard. Each template shows up with its own live preview:

Installing

Via HACS:

1. Click the badge above, or add https://github.com/quincarter/hass-decluttering-card-explorer as a HACS custom repository (category: Lovelace)
2. Install Decluttering Selector
3. Add it to any dashboard with decluttering_templates defined:

type: custom:decluttering-selector

Full install and usage docs (including a manual-install path if you’re not on HACS) are in the README.

Requirement: you need the real decluttering-card installed too. This just fills in configs for it; it doesn’t replace it.

Optional: on-dashboard status

By default the card renders nothing visible. It’s only there to register templates into the picker. If you want a quick on-dashboard confirmation of what it found:

type: custom:decluttering-selector
show_info: true
title: My Templates
dedicated_picker: false

A couple of things to know

• It only reads templates from the dashboard it’s placed on, so add a copy of the card to each dashboard whose templates you want available there.
• If you edit templates while the “Add Card” dialog is already open, it won’t live-refresh mid-session (Home Assistant loads the picker’s list once, on open), so close and reopen it to see the update.

GitHub: GitHub - quincarter/hass-decluttering-card-explorer: Home Assistant Lovelace card that registers your decluttering-card templates into the native Add Card picker. · GitHub

I’ve been running this locally in my own instance for a while now and finally felt like I could share it with others. This is my first attempt to contribute to HA!

This is brand new and scratched my own itch first. Feedback, issues, and PRs welcome.

[kbrown01]

I like this, it really helps especially how I setup my system. I create a dashboard that groups together views for certain things. Like below, there are many views but these are all called from a Navbar. The first page is being setup for instructions about what’s in this.

So I add this to the “information card” and get the list of decluttering-templates in it.
Simple but makes things easier. Note that normal users never see this, the do not even see the whole dashboard. The Navbar takes them to the view. Admin users can make modifications.

First suggestion … the “By card…” view has categories that can be expanded/collapsed. It would be huge to (instead of searching for “decluttering”) that they could be automatically put into a category of “Decluttering”. Like Core, Energy, Community already are …

[Quincarter]

I’ll see if I can do that. I had issues when I tried initially because the decluttering cards themselves don’t link to a particular domain. But putting them in their own section would be a good add. Thanks for the feedback!

[Quincarter]

The hui-picker sections are hardcoded: “Core cards” and “Energy cards” come from HA’s own built-in card manifests, and every single window.customCards entry — with zero exceptions — gets flattened into one bucket rendered under the “Community cards” panel. That’s the only mechanism our card (or any HACS card: button-card, mushroom, etc.) can register into. The CustomCardEntry type we already use in register.ts (type, name, description, preview) has no category/group field, and there’s no other public API for it. Getting a real named section would mean patching HA’s frontend itself, which isn’t something a card can do.

Within that flat “Community cards” list, entries just sort alphabetically by name (falling back to type) — not by registration order, not by any grouping key.

[kbrown01]

Not a problem … but maybe you should post a enhancements request to allow this categorization.

Not to mention if I could easily see button card templates and kiosk temples exactly the same, it would be insanely great. However, this is not the same as button card’s can be fragments of cards and decluttering is a card.

[Quincarter]

I’ve got something churning right now. Just an idea. I’ll put it in a branch and we can see if it’ll work. Might help separate them some.

[Quincarter]

i just updated this and i think Favoriting could solve your issue here with the categorization.

I created a dedicated decluttering picker configuration option - just modify your existing config:

type: custom:decluttering-selector
show_info: true
title: My Templates
dedicated_picker: true # add this to your config

I am still kind of tweaking the UI for it but it works and doesn’t break existing functionality. I just created this new boolean as a feature toggle of sorts. This is as of v0.4.0 - i am also playing with the naming - i named it 0 Decluttering: Choose a Template to hopefully keep it near the top of the list. If that’s annoying then let me know and i will just keep it clean as Decluttering: Choose a Template.

Additionally - i added a prefix to the existing flow so everything has a Decluttering: <template name> prefix to keep them together in the same place since it just sorts alphabetically.