Lovelace custom-cards via ui config

Hi all! i am entering in the amazing worls of lovelace and i was wondering… Is it possible to add a custom card via the ui configurator or is only possible via the yaml mode?

Yes you can. You need to add the custom card path using the “Raw config editor”. After that you can use “Configure UI” to add/edit custom cards.

1 Like

thanks for the answer, i try but i can’t figure it out.
I want to add this:

Not sure if you figured this but just for anyone else who turns this up.

Press 3 dots menu button in top right and pick “configure UI”
press the same menu button again in configure mode and select “raw config editor”


Thanks bradyn12. That did it for me!

I’m still having trouble with this. In my config directory, I created a folder title ‘www’. I uploaded the custom card file to it (group-card.js, from here:

I then went into the raw config editor and added it to the resources: tag at the top, as follows:

  - type: js
    url: /local/my-custom-card.js
  - type: css
    url: /local/my-webfont.css
  - type: js
    url: /local/group-card.js

(the other two entries were already there, though I don’t see the files on disk)

I then went to the view, clicked “manual card”, and added the following to the json box:

  "type": 'custom:group-card',
  "card": {
    "type": "entities",
    "title": "All Automations"
  "group": "group.all_automations"

This, however, returns the error Custom element doesn't exist: group-card.

Can anyone spot what I’m doing wrong? It’s my first time trying to add a custom card to lovelace.

For reference, I’m on on version 0.87.1


did you copy the raw file for the card from the github repo?

did you restart HA after you added the card to your www folder?

1 Like

I did copy the raw file, but did not restart HA. That might well be it - didn’t realize it needed a restart. Will try.

Yup, that did it. Thanks!