Home Assistant Floorplan

Last reviewed Sep 13, 2026 · 759 words

Ninety percent of a ha-floorplan project is drawing the floorplan; the card itself is an afternoon. That is the thing nobody tells you before you install it. ha-floorplan is a Lovelace custom card for Home Assistant that loads an SVG you supply, maps element IDs in that SVG to entities, and restyles or animates those elements as states change, so a lamp glows yellow when it is on and a door outline turns red when its contact sensor opens. The result is the most impressive dashboard most people will ever build, and the hours go into Inkscape, not YAML.

It is a card, not an integration

Install it through HACS as a frontend resource, or copy the built JavaScript into www/ and register it as a Lovelace resource by hand. Nothing runs on the server side; the 64 MB figure in the catalogue is browser memory on the tablet displaying it. Configuration is a card of type: custom:floorplan-card whose config block names the SVG and a stylesheet and then lists rules. A minimal rule looks like this:

type: custom:floorplan-card
config:
  image: /local/floorplan/home.svg
  stylesheet: /local/floorplan/home.css
  rules:
    - entity: light.kitchen
      element: kitchen-light
      state_action:
        action: call-service
        service: floorplan.class_set
        service_data: '${entity.state === "on" ? "light-on" : "light-off"}'
      tap_action: toggle

The element value is the SVG element's id attribute. The state action sets a CSS class; the stylesheet decides what the class looks like. Tap actions call services, open more-info dialogues or navigate. Everything else in the project's documentation is elaboration on that pattern: text substitution for temperatures, image swaps for cameras, hover styles, per-rule JavaScript expressions.

The SVG is the work, and the IDs are the interface

Draw the plan in Inkscape, or export one from Sweet Home 3D, or trace the estate agent's PDF. Every controllable thing needs its own element with a stable, meaningful id, set in Inkscape's object properties, not the auto-generated path1234. Group lights per room, put door and window sensors on their own paths, and leave the furniture in a background layer with no IDs. Expect 4 to 10 hours for a two-storey house done properly, and expect to reopen the file every time you add a device. Keep the SVG in version control; a stray Inkscape save that regenerates IDs breaks every rule at once, and the diff will show you exactly which.

Rules scale with your patience, not your hardware

Because the card evaluates JavaScript expressions per rule per state change, a plan with 150 rules is still trivial for a modern tablet. What breaks is human maintenance: rule lists grow until nobody remembers which class does what. Two habits keep it sane. Name CSS classes after states, not colours, light-on not yellow, and put shared logic in one rule with an entity list rather than copying blocks. Test on the actual wall tablet early; a Fire tablet's browser renders SVG filters and animations far slower than a desktop and the difference shows up as a laggy dashboard, which is the card's only real performance trap.

When the built-in Picture Elements card is enough

Home Assistant ships a Picture Elements card: a background image with icons and state badges positioned by percentage coordinates. For "show me a floorplan with a few lights on it" it takes 30 minutes and no Inkscape. ha-floorplan wins when you want the drawing itself to change, room fills, glowing fixtures, animated fans, or when you have more than a couple of dozen entities and coordinate placement becomes a chore. If you are in your first weeks with Home Assistant, do the first-month basics and Picture Elements before committing an SVG weekend; the home automation category has plenty to set up first.

What I'd do

Sketch one floor in Inkscape with IDs for every light and door sensor and nothing else, wire it to ha-floorplan with a single class-setting rule per entity type, and put it on the hallway tablet. Add the furniture, cameras and temperature labels only after living with it for a month, because the things you actually tap are fewer than the things you planned to draw. It is the closest a self-hoster gets to a Control4 touch panel for the price of a spare tablet, provided you enjoy vector drawing enough to maintain the file.