Solution entry · Personal systems

Home Assistant Estate Panel

A self-hosted React and TypeScript reference build that combines native Home Assistant cards with custom estate controls on a shared connection and layout.

Published 2026-09-14 Updated 2026-09-14 Repository created 2026-08-17 Last public push 2026-09-14 Self-hosted reference build
Original state to outcome

What changed in the design.

Customer-neutral framing keeps the pattern reusable without claiming private results.

01 / Original state

Before the solution

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.

02 / Delivered

What was built

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.

03 / Outcome

Value enabled

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.

Architecture

How the public pattern fits together.

Home Assistant entity state flows through selective websocket subscriptions into a React estate panel, with confirmation before sensitive actions.

Home Assistant Estate Panel architecture Home Assistant entity state flows through selective websocket subscriptions into a React estate panel, with confirmation before sensitive actions. 01 Home Assistant 02 Selective store 03 React panel 04 Confirmed action
01 / Home Assistant

An existing self-hosted Home Assistant environment provides entities, services, and the authenticated connection.

02 / Selective store

Websocket-backed external-store subscriptions update only the entity views that need new state.

03 / React panel

Custom components and wrapped Home Assistant cards share one estate layout.

04 / Confirmed action

Security-reducing operations require an explicit confirmation before a service call is sent.

Capabilities

What the project demonstrates.

  • 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.
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.
Limitations
  • 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.
Public provenance

Follow the evidence.

These public sources support the entry. No private customer material or internal evidence was used.