Moving from manual install to HACS: lovelace custom cards


I am lost, please help.

I had a perfectly working setup where I used custom cards: layout-card, button-card, slider-entity-row, card-tools which I had installed manually. To facilitate management (updates, …) I moved to HACS some time ago. I used a stepwise approached and replaced card by card from manual install to HACS and everything seemed to work fine (even after reboot). Now, suddenly everything came crashing down and I cannot get the custom cards to load anymore. I really want the cards to load by using HACS and don’t want to move back to manual installation.

My HACS custom-cards got installed here:


Question 1: How do I get Home Assistant to look in these folders when trying to find the custom cards?

My manual installation were in different folders that I had created based on instructions I found.

Question 2: To get the manual installations working I also had to have these resources in ui-lovelace.yaml. Do I need these when using HACS and what should the path look like?

 - url: /community_plugin/button-card/button-card.js
   type: module
 - url: /local/plugins/layout-card.js?v=1
   type: js
 - url: /local/slider-entity-row.js
   type: module
 - url: /local/plugins/card-tools.js?v=1
   type: js

The error message I get for all my cards are like the picture below. Custom element doesn’t exist: button-card.

Question 3: Any thought on why I did not get the error messages right away? Browser cache? Different types of home assistant reboot? I reboot from UI.


You need to change your urls. They should all be /hacsfiles/ instead of /local/ or community_plugin/. Here’s my resource file which by the way has also needs to be moved to the configuration file as of 0.109 I think. Also most are now Modules instead of type:js.

# lovelace reaources
  - url: /hacsfiles/flex-table-card/flex-table-card.js
    type: module
  - url: /hacsfiles/lovelace-card-mod/card-mod.js
    type: module
  - url: /hacsfiles/lovelace-layout-card/layout-card.js
    type: module
  - url: /hacsfiles/lovelace-multiple-entity-row/multiple-entity-row.js
    type: module
  - url: /hacsfiles/lovelace-state-switch/state-switch.js
    type: module

1 Like

Thanks alot for your response.

I changed the URLs, changed to module and moved the resources part to configuration.yaml as per below. Should I keep the v=1 after the question marks?

  - url: /hacsfiles/button-card/button-card.js
    type: module
  - url: /hacsfiles/lovelace-layout-card/layout-card.js
    type: module
  - url: /hacsfiles/lovelace-slider-entity-row/slider-entity-row.js
    type: module
  - url: /hacsfiles/lovelace-card-tools/card-tools.js
    type: module

Unfortunately this made no change at all after reboot. It feels like my changes are not taking effect.

edit: running configuration validation I get: Component error: resources - Integration ‘resources’ not found, seems like resources is not allowed in the configuration.yaml?

edit: moved resources back to ui-lovelace.yaml and get ok at configuration.yaml. Also got custom card: button-card working, still problems with layout-card though.

Don’t think you need to version information anymore. Did you clear the browser cache?

1 Like

Lots of things are starting to work now again. This seems to be the right path! I will keep on testing.

Thanks alot!

edit: in general I started to get quite confident around Home Assistant but when things like this happen it is like starting all over. How am I supposed to know about the /hacsfiles/ and module and in which file configuration vs. ui-lovelace I should place stuff. Is it documented? Without persons like you I would never have succeeded.

1 Like

I am confident in saying that HACS now adds the card to whatever file it needs to be referenced in.

EDIT: Yep, just tested, once you add the card via HACS, there is no need for any further configuration. Just start adding the card to Lovelace in configure ui interface.

NOTE BENE - see ludeeus’s clarification 2 posts below.

I am managing my UI and all custom cards through yaml and I had to add a resource: section with url references in ui-lovelace.yaml to get it to work.

Starting with 1.0.0 it will handle the resources atomagically if you manage those in the UI, For YAML users they still need to manually add it to the lovelace: section of their configuration.

1 Like

Thank you for the definitive word. Love your work.


Hi All,

sorry to wake up this post but I’m going insane.
I tried all the things you mentioned here but nothing helps. and whenever I try to add the HACS integration from configuration I always get this window, like something is not right, and once I put my git token it doesn’t add the HACS to the side panel.

any suggestions?