veenm
f4c98e27af
- One card system in three device bands, applied automatically: compact with hover on desktop; larger type and 44px controls on tablets and wall panels; touch sizes in a tighter frame on phones; narrow-card layouts by container - Answers as the largest thing, in regular-weight tabular figures; plain outline icons instead of tinted chips; pale status pills; flat buttons and sliders without shadows or gradients - Energy: power flow (sun, house, battery, grid and the flows between them) - Garage: state in large type with one wide button; vacuum: state and a battery bar - The first heading on a tab is the page's h1 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Dashboard Studio for Home Assistant
A Home Assistant app (formerly called an add-on) that adds a Dashboard Studio tab to the sidebar. In that tab you build dashboards on a free-form grid with drag-and-drop, live entity widgets and full theme control.
Install
- In Home Assistant, go to Settings → Apps → App store, open the ⋮ menu → Repositories, and add
https://git.melvanveen.nl/veenm/ha-dashboard-studio. - Find Dashboard Studio in the store, install it, start it, and turn on Show in sidebar.
- Updates appear in the App store automatically whenever the version in
dashboard_studio/config.yamlgoes up.
Local install, no GitHub: copy the dashboard_studio folder into the /addons share of your Home Assistant host (for example with the Samba or SSH app). Then go to Settings → Apps → App store → ⋮ → Check for updates. It appears under Local apps.
The first build happens on your Home Assistant machine and takes a minute or two.
How it works
dashboard_studio/server/main.pyis a small aiohttp server. It is reachable only through Home Assistant ingress, so only logged-in Home Assistant users can reach it. It stores dashboards in/dataand relays the Home Assistant websocket API using the Supervisor token. Your browser never needs a long-lived access token.dashboard_studio/web/is the editor and runtime, written in plain JavaScript with no build step.widgets.jscontains the widget library. To add a widget type, add an entry there withfieldsand arenderfunction.
Local development
Without a SUPERVISOR_TOKEN, the server runs against a built-in mock Home Assistant with fake lights, sensors, a thermostat and other entities:
pip install aiohttp && python3 dashboard_studio/server/main.py
Then open http://localhost:8099. The Photos widget also has fake Immich albums in this mode. To try your real Immich server, set IMMICH_URL and IMMICH_API_KEY before starting the server.
App icon
dashboard_studio/icon.png is drawn by tools/make_icon.py (needs Pillow): python3 tools/make_icon.py dashboard_studio/icon.png.