nvision

Home Assistant dashboard cards — neutral, theme-aware, visual-editor-first.

Setup

npm install
npm run fetch-refs   # clones HA frontend (sparse) + Mushroom into refs/ (gitignored)
npm run build

Try in Codespaces

Click the Codespaces badge, wait for the devcontainer to finish, then open the forwarded Home Assistant port. Complete Home Assistant's first-run onboarding and open the preloaded nvision dashboard to try the demo cards.

The Codespaces demo loads the committed bundle from /local/nvision/nvision.js and uses local demo entities, so no real Home Assistant devices are required.

Local development

Terminal 1 — build the bundle when source files change:

npm start

Terminal 2 — Home Assistant with dev config (requires Docker):

docker run --rm -p8123:8123 -v ./.hass_dev:/config homeassistant/home-assistant:stable

Add the card resource in HA if not already loaded via extra_module_url:

http://localhost:4000/nvision.js

References (local only, not committed)

Run npm run fetch-refs to populate refs/:

Path	Contents
refs/home-assistant-frontend/	Sparse checkout: Lovelace cards, common helpers, editors, types
refs/lovelace-mushroom/	Full Mushroom repo — card architecture, build tooling, editor patterns

Use these when implementing new cards. Copy patterns from src/cards/blank/ rather than importing reference code into the build.

Adding a card

1. Copy src/cards/blank/ to src/cards/your-card/
2. Rename constants, config type, and custom element tag
3. Register the import in src/nvision.ts
4. Implement render using HA built-in elements (ha-card, ha-tile-info, ha-state-icon, …) and CSS variables (--primary-text-color, --ha-card-border-radius, --state-inactive-color, …)

Blank card

Type: custom:nvision-blank-card

Minimal neutral card with entity picker and optional name in the visual editor. Uses HA-native web components and theme variables only — no custom color palette or Mushroom styling.

Install via HACS

1. In HACS, open Frontend → ⋮ → Custom repositories.
2. Add this repository URL, category Dashboard.
3. Install nvision and add the Lovelace resource when prompted (or use /hacsfiles/nvision/nvision.js).

Updates appear in HACS after a GitHub release is published.

Cards

Type	Description
custom:nvision-blank-card	Minimal neutral card
custom:nvision-activity-card	Activity timeline
custom:nvision-air-quality-card	Air quality
custom:nvision-circle-gauge-card	Circle gauge
custom:nvision-light-card	Light control
custom:nvision-liquid-card	Liquid fill gauge
custom:nvision-power-draw-card	Power draw
custom:nvision-power-glance-card	Power glance
custom:nvision-waveform-card	Waveform
custom:nvision-heat-map-card	Temporal heat map
custom:nvision-entity-overview-card	Entity overview
custom:nvision-reactor-temp-card	Reactor temperature
custom:nvision-stat-card	Stat with trend graph
custom:nvision-sum-card	Entity summary
custom:nvision-event-log-card	Event log

Releases

Push a semver tag to publish a release (CI builds and attaches nvision.js):

git tag v0.1.0
git push origin v0.1.0

HACS uses the latest release for installs and updates. dist/nvision.js is committed on main so HACS can validate the repository.