Solved: How do I add custom cards for lovelace?

Share your Projects! Dashboards & Frontend
1

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?

2 Likes
2

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.

7 Likes
3

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

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

4

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 ?

5

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.

6

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

7

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.

2 Likes
8

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?

2 Likes
9
2 Likes
10

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?

1 Like
11

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.

1 Like
12

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).

3 Likes
13

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

image
image1473×490 29.8 KB

1 Like
14

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

1 Like
15

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”

Lovelace-a-is-undefined
Lovelace-a-is-undefined788×207 9.57 KB

Can somebody help ?
Thanks in advance

16

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

17

Thank you. This also resolved something I have been trying to get to work for around 2-3 weeks :slight_smile:

18

Hi Sean. I’m sorry to sound dense but I can’t get this exact card working. When I follow the steps you outlined for mini-media-player I get the default media_player card with the power button and nothing else. I’ve downloaded the mini-media–player-bundle.js to config/www, I’ve added it as a resource in Lovelace->Resouces, but when I do the manual add I still get the default card. Do you have any suggestions?

Thanks in advance!
-Adrian Smith

19

When I say manual card method, I am referring to the actual “Manual” card at the very bottom of the card picker. I think you might have been copying that code into the wrong place (Media Control card).

Some other suggestions:

  • If you just created the /www/ folder for the first time, you need to restart.
  • You might have to “Reload Resources” via the Lovelace menu (three dots icon in top right corner of screen)
  • Ludeeus has a good tutorial here that might help: my custom cards don’t work
20

Thanks for the reply!

Nope, I’m trying to add the card manually using the manual card entry at the bottom of the card selector panel. The generic “Media Control” card is all that appears.

I’m reasonably comfortable with HA - I’ve been using it for a year now - but this one has me stumped. My www folder isn’t new, I’ve reloaded Resources repeatedly, I’ve tried adding the card by changing my Lovelace mode to YAML and creating the card manually in ui-lovelace.yaml… No matter what I do whenever I create the mini-media-player card I get the standard Media Control card.

I’ll take a look at Ludeeus’ tutorial. Thanks.

-Adrian

1 Like