Register resources

Before a dashboard can use your card, badge, feature, view, or strategy, Home Assistant has to load its JavaScript. That takes two steps: serve the file, then register it as a resource.

Create a folder called www in your Home Assistant configuration folder, next to configuration.yaml. Files in it are served at /local/, so www/my-card.js becomes /local/my-card.js.

Home Assistant only picks up the www folder at startup. If you just created it, restart Home Assistant once.

You can also load a resource from any other URL, like a file published by your project.

Resources are managed in the UI by default:

1. Go to Settings > Dashboards.
2. In the top-right menu, select Resources.
3. Select Add resource, enter the URL, like /local/my-card.js, and choose JavaScript module.

Resources are loaded for all dashboards. After you change a resource, reload the page in your browser. Your browser may cache the old file: adding a version to the URL, like /local/my-card.js?v=2, forces a fresh copy.

To manage resources in YAML instead, set resource_mode to yaml in the lovelace section of configuration.yaml, and list them there:

lovelace:
  resource_mode: yaml
  resources:
    - url: /local/my-card.js
      type: module

With resource_mode: yaml, the Resources page in the UI no longer manages them. After a change, run the lovelace.reload_resources action, or restart Home Assistant, then reload the page in your browser.

The UI only offers module and css for a new resource. It shows js and html only for an existing resource that already has that type.

In safe mode, Home Assistant loads no resources at all, so custom cards don't show up there.

Some registrations only work once the resource is loaded: a card in the card picker, a feature in the feature picker, or a dashboard in the new dashboard dialog. If yours does not show up, check that the resource loads (look for errors in the browser console), then reload the page and open the dialog again.