HaCasa Nova

The HaCasa reboot. A room-first Home Assistant panel, built on the Homio design by iamtherufus.

Documentation · Demo video · Install · Discussions · Screenshots · HaCasa v2 (legacy)

_{▶ Click to watch the 40-second demo}

⚠️ HaCasa Nova is a work in progress and needs testing. This first release has only been run on a handful of homes, so expect rough edges: things may break or change between versions. Try it next to your current dashboard rather than replacing it, and please report what you run into. Known issues are tracked in #158.

Why a reboot?

HaCasa started as a set of button-card templates: a calm, good-looking dashboard that the whole household could use. It grew to almost 500 stars, and then it stalled, because every new device meant more YAML and every Home Assistant update risked breaking a template.

HaCasa Nova keeps the idea and throws out the YAML. It is a single JavaScript file that reads your home straight from Home Assistant:

• Your areas become rooms. Every entity assigned to an area (directly or through its device) shows up on that room's page. Add a lamp in Home Assistant and it appears; no dashboard to edit.
• Everything is set up in the panel. A four-step wizard on first open, then a settings page with tabs. Settings are stored per Home Assistant user, so they follow you to every device and survive updates.
• No dependencies. No button-card, card-mod, layout-card or theme required.

The look comes from Homio by iamtherufus: big photo backgrounds, frosted-glass cards, a pill navigation and a lot of breathing room. Nova rebuilds that design as a native panel and adds HaCasa's focus on being friendly for everyone in the house.

Features

Home view	Greeting, date, indoor climate, weather with hourly forecast, a rotating line of things worth knowing (waste pickup, open doors, appointments), status pills and quick actions.
Room pages	One page per area with a photo, its temperature and humidity, and a scrolling strip of cards. Swipe or scroll between rooms.
Cards	Lights (vertical dimmer, brightness steps or colour dots), switches and smart plugs (live watts, kWh today, timers), media with artwork and transport, covers, thermostats (drag rail, modes, presets), fans, locks, vacuums, humidifiers, cameras, appliances (Home Connect, Miele …: programme, progress, finish time), groups, scenes and Jinja template cards.
Pages	Sensors (attention first, per room or per kind, trend bars), Energy (today per hour, biggest consumers), Automations (toggle, errors, last run), Cameras and System (CPU, memory, disk, network, updates).
Attention	Unavailable devices, low batteries, pending updates and persistent notifications in one place, with one-tap install for updates.
Popups	Every card opens a detailed popup: brightness, colour and colour temperature, climate modes, media volume, history of the last 24 hours, and a shortcut to Home Assistant's own dialog.
Per-card settings	Name, icon, tap and hold behaviour, bottom line, custom action buttons and template overrides per card, plus defaults per card type.
Extras	Search, presence pill, alarm keypad, doorbell camera popup, light scene presets per room, guest and vacation modes, idle screen, Dutch, English and German.
Phone and tablet	Built for wall tablets and phones alike: the strip becomes a two-column grid on phones.

Screenshots

Room page · photo, climate and a strip of cards	Appliances and plugs · power strips, dishwasher programme and progress
Light popup · brightness, colour and colour temperature	Climate popup · target, modes, presets, every room's temperature
Sensors · attention first, then every room	Energy · now, today per hour, biggest consumers
Settings · everything in the panel, stored per user	First run · a four-step setup

Install

You need Home Assistant 2024.4 or newer. HaCasa Nova can run as its own sidebar panel (recommended) or as a card inside a dashboard.

1. Download with HACS

1. Open HACS in Home Assistant.
2. Open the menu (⋮, top right) and choose Custom repositories.
3. Add https://github.com/damianeickhoff/HaCasa with type Dashboard.
4. Search for HaCasa Nova, open it and choose Download.
5. Reload your browser when HACS asks.

Manual download (without HACS)

1. Download hacasa-nova.js from the latest release.
2. Copy it to /config/www/hacasa-nova/hacasa-nova.js.
3. Use /local/hacasa-nova/hacasa-nova.js wherever the steps below say /hacsfiles/HaCasa/hacasa-nova.js.

2a. Add it as a sidebar panel (recommended)

Add this to configuration.yaml and restart Home Assistant:

frontend:
  extra_module_url:
    - /hacsfiles/HaCasa/hacasa-nova.js   # loads the HaCasa logo icon for the sidebar

panel_custom:
  - name: hacasa-nova
    url_path: hacasa
    sidebar_title: HaCasa
    sidebar_icon: hacasa:logo
    module_url: /hacsfiles/HaCasa/hacasa-nova.js

HaCasa now appears in the sidebar with the HaCasa logo. Open it and the setup wizard starts.

💡 Already have a frontend: section (for themes, for example)? Add extra_module_url to it instead of adding a second one. Without extra_module_url the panel still works; use sidebar_icon: mdi:home-outline then, because the logo icon only loads once the panel has been opened.

The icon works everywhere Home Assistant takes an icon, so hacasa:logo can also be used on your own cards.

2b. Or use it as a dashboard card (no YAML)

HACS registers the file as a dashboard resource for you. Then:

1. Settings → Dashboards → Add dashboard → New dashboard from scratch, then open it.
2. Edit the dashboard, change the view type to Panel (single card).
3. Add a card of type HaCasa Nova (or paste the YAML below).

type: custom:hacasa-nova-card

Inside a card the rooms are routed through the URL hash (#/kitchen), so the dashboard URL itself never changes.

3. Add room photos (optional)

Put a photo per room in /config/www/images/rooms/, named after the area: Living room → living-room.jpg (.jpeg, .png and .webp work too). The home view uses home.jpg. You can also set a picture on the area in Home Assistant, or choose a photo per page in the panel settings. Rooms without a photo get a calm gradient.

That's it. Everything else lives in the panel: More → Panel settings.

💡 For the best experience, make HaCasa Nova your start page and hide Home Assistant's sidebar. Both are one click per user; see Best experience in the docs, which also has tips for wall tablets.

Documentation

The full guide is at damianeickhoff.github.io/HaCasa: installation, the setup wizard, every card and its settings, the built-in pages, the optional theme for the rest of Home Assistant, and troubleshooting.

Good to know

• Admin features. Template cards and your own ticker lines use Home Assistant's template renderer, installing updates calls update.install, and the System page asks the Supervisor for host info. These need an administrator account; for other users those parts stay empty.
• Fonts. The panel uses Hanken Grotesk from Google Fonts. Without internet access it falls back to the system font.
• Languages. English, Dutch and German, following your Home Assistant language. Other languages fall back to English. Translations are welcome: each language is one file in src/lang/, see CONTRIBUTING.

Community

• Questions and help: Discussions → Q&A
• Show your setup: Discussions → Show and tell
• Ideas: Discussions → Ideas
• Bugs: open an issue; known issues are in #158
• Want to help? See CONTRIBUTING.md

HaCasa v2 (legacy)

The original button-card based HaCasa is kept on the legacy branch, with its releases up to v2.1.3. It is no longer maintained.

Development

npm install
npm run watch            # rebuilds dist/hacasa-nova.js on every change
npx http-server .. -p 8097 -c-1
# open http://localhost:8097/<this folder>/dev/index.html
npm run deploy:dev       # a dev panel in your own Home Assistant, next to the HACS one

dev/index.html runs the panel outside Home Assistant against a mock home (dev/mock-hass.js); add ?lang=nl for Dutch. dev/card.html?fresh shows the card wrapper with the first-run wizard. Icons are drawn by dev/make-icons.mjs and inlined into the bundle by build.mjs. See the development guide for more.

Credits

• Design: Homio by iamtherufus. HaCasa Nova would not look the way it does without it.
• HaCasa: created by Damian Eickhoff. HaCasa logo by Fredrik Persson.
• Built with Lit. Icons are original, drawn for this project.
• Made with AI assistance. HaCasa Nova was written together with an AI coding assistant (Claude Code). The design decisions, the testing and the maintenance are mine; much of the code was written by the AI under my direction, which is why you'll see it credited in the commit history. It is also what made bringing HaCasa back possible at all.
• And the community, who kept asking about HaCasa long after it went quiet. This one is for you. 💜

License

MIT. The Homio design credit and the license notices of what is bundled are in NOTICE.md.