Titel: Custom JSX dashboards in Home Assistant, with an in-browser editor and SDK
Hey there,
I wanted to share a project I've been working on, because I think it might be useful to others who've hit the same limitation.
What frustrated me: it's easier than ever to prototype a frontend with modern tools (including AI-assisted coding), but in Home Assistant I still often end up in card stacks and YAML when I want something more tailored, reusable components, custom layouts, a UI that feels intentional rather than assembled. Lovelace works well for many use cases. I simply wanted a path for writing actual UI code when the dashboard is the main focus of the work.
That's why I started building this integration.
The workflow is straightforward: install the integration, open a panel in the sidebar, click Edit, write JSX, and save. Your dashboard runs as a native HA panel. There is no Node.js on the Home Assistant server and no configuration.yaml entry required.
This isn't meant to replace Lovelace across the board. It's for people who want to pro-code their dashboards (fully custom if you prefer) while still having sensible building blocks. The SDK (@ha, @ha/ui, @ha/layout, @ha/format, @ha/debug) covers hooks, widgets, layout, formatting, and debug logging so you're not rebuilding fundamentals on every project.
What the integration includes:
-
In-browser editor with live preview (split view, Ctrl/⌘+S to save)
-
Multi-file projects with normal imports (e.g.
components/Card.tsx) -
Inserter: snippets for values, templates, actions, entity IDs; widgets eject as editable source (imports from
@ha/uiwork too) -
Multiple dashboards: each saved project gets its own sidebar entry automatically
-
Showcase dashboard on first install (home, widgets, charts, hooks, layout, format)
-
Storage in HA (household-wide, survives updates and normal backups)
A minimal example:
import { useEntity } from '@ha';
import { Stat } from '@ha/ui';
import { num } from '@ha/format';
export default function Dashboard() {
const temp = useEntity('sensor.outdoor_temperature');
return <Stat label="Outside" value={num(temp?.state)} unit="°C" />;
}
For local development, you can also sync a workspace to VS Code (sync:pull / sync:push), generate SDK reference and entity types for your instance, and use an optional MCP server with Cursor-style editors. None of that is required; the primary flow remains install, open the sidebar panel, edit, save.
The project is still really early. I'm actively developing it and would appreciate feedback on whether it's worth the effort of continuing the development.
(Formatting of this post was assisted by AI since I prefer touching grass instead of putting my hand on Markdown formatting.)
Here's a little preview of the integration
I would really appreciate your thoughts on this.