Lovelace Plugins

The Lovelace interface can be extended with custom cards, entities, rows and various plugins.

Installing a plugin

For most plugins, the process is as follows.

1: Read the docs

Be sure to read the documentation of the plugin you are interested in. The process of installing it might be totally different from what I'm describing below.

2: Download the plugin.

Most plugins are distributed as a single .js file, e.g. card-modder.js.

Make sure you get the Raw version if downloading from Github.

Place the file somewhere in <home assistant config>/www/ e.g. /config/www/plugins/card-modder.js or ~/.homeassistant/www/card-modder.js.

If www/ doesn't exist, you should create it and then restart Home Assistant.

Note: If you're comfortable with git, the easiest way to do this is to just navigate to www/ and run

git clone https://github.com/thomasloven/lovelace-card-modder

3: Import the plugin in your lovelace config

If you are using Lovelace YAML Mode add a resources: section to your ui-lovelace.yaml.

E.g.

tile: My awesome Lovelace config
resources:
  - url: /local/plugins/card-modder.js?v=1
    type: js
views:
  ...

The url is the path to your downloaded file. Replace <config directory>/www/ with /local/.

Adding ?v=1 will help you if you ever update the plugin. More on this later.

type is usually either js or module. Check the documentation for the plugin to be sure.