adrienbrault / ha-jsx-strategy

Dynamic Home Assistant dashboards using JSX/TSX

ha-jsx-strategy

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.

WIP Default Dashboard

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

Installation

First, install bun.

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

Migration

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}
/>;

Development

To run tests:

bun test

Documented cards

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 into type: foo-bar
• <custom-foo-bar /> will turn into type: 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

Mushroom cards

• <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