Solved: How do I add custom cards for lovelace?

I’ve tried to add some custom cards to my Hass.io setup without success.

Regardless of how I add them (both manually, and also via HACS) I get an error when I try to create a manual card. For example, adding this code:

type: 'custom:monster-card'
show_empty: false
card:
  type: entities
  title: Lights On
filter:
  include:
    - domain: light
      state: 'on'

gets me the red error box, with the message:

Custom element doesn’t exist: monster-card.

I’ve done numerous restarts, tried with different custom cards, and have verified that the js is accessible at the path specified in my ui-lovelace.yaml file.

Is there a step that I’m missing?

I’m replying in case others have the same issue.

The solution was made clear here - https://www.reddit.com/r/homeassistant/comments/alcuv1/lovelace_custom_cards_without_uilovelaceyaml/

While every single piece of instruction I’ve read instructs me to add the resource to ui-lovelace.yaml, it turns out that this isn’t the case (perhaps it was on previous versions).

Instead, I had to click the top right ellipsis, select ‘Configure UI’, then click it again, and select ‘Raw config editor’, then add the following at the top.

</s> <s>resources:</s> <s> - url: /community_plugin/monster-card/monster-card.js?v=1</s> <s> type: js</s> <s>

Voilà - my custom cards were instantly recognised!

I hope this helps someone else like me.

Update: see Solved: How do I add custom cards for lovelace? for new method.

5 Likes

So, you would add it to lovelace.yaml if you were in yaml mode.

This was, indeed, the only way for a while.

Hi Roboman,
I can not find resources as you describe any chance you can help. I have the same problem, can not find resources at the top of the RAW editor ?

Im still figuring this out as well but it appears its changed now. If you go to Configuration, then Lovelace Dashboard, you will find an area to add resources now.

Is this still the case or has it changed again? When I go there I just see my current dashboard and no options to change/add anything.
Thanks

Thanks for the update - yes, it has now been changed to a menu option under Configuration > Lovelace dashboard.

You can then click the Orange + at the bottom right and copy in the configuration entries.

So all I see on the Configuration -> Lovelace area is Dashboards only. I don’t see anywhere to add resources.

Clicking the big button in bottom right lets me add dashboards, but not resources. Am I in the wrong place?

1 Like

I have a similar question. I have added a card via HACS (mini-media-player). It installed fine. The entry in Lovelace dashboard resources is there. Also, the code is all in the place that is referenced in the resource. However, when I try to add a card to the front end (via the UI in a manual card) I get an error.

“no card type configured”

the ui yaml is:

- entity: media_player.livingsamsungtvip
  type: 'custom:mini-media-player'

any ideas on what I have missed?

Agreed I am in the same boat. I added a custom card via HACS I see it is in the resources properly. But I do not understand how to add it to the frontend UI. There is something I am not understanding for sure.

You need to remove that hyphen when adding it via the manual card method. So paste this in and it should work:

entity: media_player.livingsamsungtvip
type: 'custom:mini-media-player'

(same for @markmghali question too).

1 Like

This is what ended up working for the card I was using:

Thanks Sean, that did the trick. I hate it when a simple YAML issue kicks my butt!!

1 Like

Hello I read carefully all the post related to this issue but still do not understand why it do not work for me. Using Home Assistant 0.109.3
The card is added sucessfully to the configuration/lovelace dashboard/ressources
And I get the error “a is undefined”


Can somebody help ?
Thanks in advance

Oups I read again and found entity must be entities !!
Sorry I am an old guy!