Boilerplate Card by @iantrich
A community driven boilerplate of best practices for Home Assistant Lovelace custom cards
Hey dude! Help me out for a couple of 🍻 or a ☕!
| 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 |
| 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 |
| repeat | number | Optional | How often to repeat the hold_action in milliseconds. |
non |
Clone this repository
Install necessary modules
yarn install or npm install
Do a test lint & build on the project. You can see available scripts in the package.json
npm run build
Search the repository for all instances of "TODO" and handle the changes/suggestions
Customize to suit your needs and contribute it back to the community
Starting a new card from boilerplate-card with devcontainer
- Fork and clone the repository.
- Open the devcontainer and run
npm startwhen it's ready. - The compiled
.jsfile will be accessible onhttp://127.0.0.1:5000/boilerplate-card.js. - On a running Home Assistant installation add this to your Lovelace
resources:
- url: "http://127.0.0.1:5000/boilerplate-card.js"
type: moduleChange "127.0.0.1" to the IP of your development machine.
If you need a fresh test instance you can install a fresh Home Assistant instance inside the devcontainer as well.
- Run the command
dc start. - Home Assistant will install and will eventually be running on port
9123
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent