Boilerplate Card by @iantrich

A community driven boilerplate of best practices for Home Assistant Lovelace custom cards

Options

Name	Type	Requirement	Description	Default
type	string	Required	custom:boilerplate-card
name	string	Optional	Card name	Boilerplate
show_error	boolean	Optional	Show what an error looks like for the card	false
show_warning	boolean	Optional	Show what a warning looks like for the card	false
entity	string	Optional	Home Assistant entity ID.	none
tap_action	object	Optional	Action to take on tap	action: more-info
hold_action	object	Optional	Action to take on hold	none
double_tap_action	object	Optional	Action to take on hold	none

Action Options

Name	Type	Requirement	Description	Default
action	string	Required	Action to perform (more-info, toggle, call-service, navigate url, none)	more-info
navigation_path	string	Optional	Path to navigate to (e.g. /lovelace/0/) when action defined as navigate	none
url	string	Optional	URL to open on click when action is url. The URL will open in a new tab	none
service	string	Optional	Service to call (e.g. media_player.media_play_pause) when action defined as call-service	none
service_data	object	Optional	Service data to include (e.g. entity_id: media_player.bedroom) when action defined as call-service	none
haptic	string	Optional	Haptic feedback for the Beta IOS App success, warning, failure, light, medium, heavy, selection	none

Starting a new card from boilerplate-card

Step 1

Clone this repository

Step 2

Install necessary modules yarn install or npm install

Step 3

Do a test lint & build on the project. You can see available scripts in the package.json npm run build

Step 4

Search the repository for all instances of "TODO" and handle the changes/suggestions

Step 5

Customize to suit your needs and contribute it back to the community

Starting a new card from boilerplate-card with devcontainer

1. Fork and clone the repository.
2. Open the devcontainer and run npm start when it's ready.
3. The compiled .js file will be accessible on http://127.0.0.1:5000/custom-header.js.
4. On a running Home Assistant installation add this to your Lovelace resources:

- url: "http://127.0.0.1:5000/custom-header.js"
  type: module

Change "127.0.0.1" to the IP of your development machine.

Bonus

If you need a fresh test instance you can install a fresh Home Assistant instance inside the devcontainer as well.

1. Run the command dc start.
2. Home Assistant will install and will eventually be running on port 9123

Troubleshooting