A self-hosted React and TypeScript reference build that combines native Home Assistant cards with custom estate controls on a shared connection and layout.
The workflow before the build
A self-hosted smart-home estate can accumulate separate dashboards, device views, and integration-specific controls that make routine status checks and actions harder to coordinate.
What the public project delivers
The public repository implements a full-page Home Assistant panel and Lovelace custom card using React, TypeScript, selective websocket subscriptions, native and community card wrappers, invented sample configuration, and confirmation dialogs for security-reducing actions.
- Registers both a full-page Home Assistant panel and a Lovelace custom card.
- Uses home-assistant-js-websocket with selective useSyncExternalStore subscriptions.
- Wraps built-in and community Home Assistant cards alongside custom React components.
- Separates invented sample configuration from git-ignored local household configuration.
The value case, stated honestly
The pattern is designed to create one adaptable local control surface while keeping real estate configuration outside the public repository and preserving deliberate review for sensitive actions.
Evidence label: Designed value: a coherent self-hosted estate view with selective live updates, reusable Home Assistant cards, and confirmation before security-reducing actions.
Architecture in one view
Home Assistant entity state flows through selective websocket subscriptions into a React estate panel, with confirmation before sensitive actions.
An existing self-hosted Home Assistant environment provides entities, services, and the authenticated connection.
Websocket-backed external-store subscriptions update only the entity views that need new state.
Custom components and wrapped Home Assistant cards share one estate layout.
Security-reducing operations require an explicit confirmation before a service call is sent.
Human control and guardrails
- The committed sample estate is invented; real household configuration belongs in a git-ignored local file.
- Security-reducing actions use confirmation dialogs before Home Assistant service calls.
- The design remains self-hosted and does not claim to replace professional monitoring.
Where the pattern stops
- The card wrapper relies on window.loadCardHelpers(), which Home Assistant explicitly does not expose as a public API and may change.
- An existing Home Assistant environment is required, and several community integrations are described as tinker-grade rather than supported dependencies.
- The repository has no project LICENSE; dependency licenses do not grant reuse rights for the repository's original code.
- No public evidence establishes reliability, security effectiveness, savings, adoption, or household outcomes.
Explore the public proof
- Home Assistant Estate Panel public repository Public application entry points, entity-store hooks, card wrapper, invented sample configuration, confirmation flow, README, package manifests, and history support this entry.
- GitHub public repository metadata Repository created 2026-08-17; last public push 2026-09-14. These are repository facts, not adoption evidence.
- Attribution: home-assistant-js-websocket Upstream websocket client dependency maintained by the Home Assistant project. License: Apache-2.0 in the repository lock metadata.
- Attribution: React and ReactDOM Upstream user-interface framework dependencies; not owned by this repository. License: MIT in the repository lock metadata.
- Attribution: Vite Upstream build-tool dependency; not owned by this repository. License: MIT in the repository lock metadata.