Home Assistant Custom Strategies enable you to build your own dashboards using javascript.
This project is a template to build a dashboard using JSX/TSX. Each JSX element will be converted to the right YAML at runtime.
TLDR: Make loops, conditionals and reuse configuration using functions.
VSCode will provide you with intellisense and type checking using a library of card types.
The repo ships with my own strategy. It is heavily inspired by AalianKhan/mushroom-strategy.
The dashboard is automatically generated using the areas and the entities assigned to each area.
In order for this strategy to work, you must organize your entities into Home Assistant Areas. After creating areas, you assign devices or specific entities to areas by editing devices/entities from the UI.
After configuring the Areas with entities, the dashboard will be automatically generated.
I recommend that you configure the strategy with icons for each of your areas:
strategy:
type: custom:jsx
areas:
salon:
icon: mdi:sofa
salle_a_manger:
icon: mdi:table-chair
bureau:
icon: mdi:desk-lamp
cuisine:
icon: mdi:stove
CleanShot.2023-12-19.at.10.48.42.mp4
The following custom cards are required:
- piitaya/lovelace-mushroom
- Clooos/bubble-card
- kalkih/mini-graph-card
- custom-cards/stack-in-card
- thomasloven/lovelace-card-mod
Then clone the repository in your www
folder:
git clone https://github.com/adrienbrault/ha-jsx-strategy.git www/jsx-strategy
cd www/jsx-strategy
Install dependencies:
bun install
Back in Home Assistant, add a dashboard resource with url /local/jsx-strategy/dist/strategy.js
as a JavaScript Module
.
Create a new dashboard from scratch > open the dashboard > edit dashboard > raw configuration editor, and use the following YAML configuration:
strategy:
type: custom:jsx
At this point the default dashboard should show areas and their lights.
Finally, customize www/jsx-strategy/src/strategy.tsx to your needs.
Every time you edit this file, make sure to run one of the following commands:
bun run build
bun run build-watch
A command is available to convert YAML to JSX in case you want to:
- convert an existing dashboard
- convert an example from documentation
- convert a card created from the UI editor
Run:
cat myconfiguration.yaml | bun run src/convert.ts
Or:
bun run src/convert.ts "
- type: custom:bubble-card
card_type: button
entity: light.bureau_plafond
button_type: switch
icon: phu:ceiling-round
show_state: true"
Sample output:
<custom-bubble-card
card_type="button"
entity="light.bureau_plafond"
button_type="switch"
icon="phu:ceiling-round"
show_state={true}
/>;
To run tests:
bun test
Note that you can also use any other card, the logic to convert a tag to its yaml configuration is as follow:
<foo-bar />
will turn intotype: foo-bar
<custom-foo-bar />
will turn intotype: custom:foo-bar-card
This is the list of cards that have types/documentation in this project:
<alarm-panel />
Source<area />
Source<button />
Source<calendar />
Source<conditional />
Source<energy />
Source<entities />
Source<entity />
Source<entity-filter />
Source<gauge />
Source<glance />
Source<grid />
Source<history-graph />
Source<horizontal-stack />
Source<humidifier />
Source<iframe />
Source<light />
Source<logbook />
Source<map />
Source<markdown />
Source<media-control />
Source<picture />
Source<picture-elements />
Source<picture-entity />
Source<picture-glance />
Source<plant-status />
Source<sensor />
Source<shopping-list />
Source<statistic />
Source<statistics-graph />
Source<thermostat />
Source<tile />
Source<vertical-stack />
Source<weather-forecast />
Source
<custom-mushroom-alarm-control-panel />
Source<custom-mushroom-chips />
Source<custom-mushroom-climate />
Source<custom-mushroom-cover />
Source<custom-mushroom-entity />
Source<custom-mushroom-fan />
Source<custom-mushroom-humidifier />
Source<custom-mushroom-light />
Source<custom-mushroom-lock />
Source<custom-mushroom-media-player />
Source<custom-mushroom-number />
Source<custom-mushroom-person />
Source<custom-mushroom-select />
Source<custom-mushroom-template />
Source<custom-mushroom-title />
Source<custom-mushroom-update />
Source<custom-mushroom-vacuum />
Source