Easy Floorplan

A Home Assistant Lovelace card for building an interactive floorplan with a visual drag-and-drop editor. Draw walls, place furniture and connect your devices to see and control your home in 2D or 3D.

Installation · Your first plan · Documentation

https://github.com/user-attachments/assets/c743c15d-07de-4f5f-9727-3b24b101c7c6

20-second overview: draw walls and doors, connect a Home Assistant entity, control lights, and view the plan in 3D.

Features

• Trace a plan — load a PDF or image in the editor, calibrate its scale and trace walls over it. See Tracing over an existing plan.

• Visual editing — draw walls, snap doors and windows into place, and arrange furniture, text and devices with undo/redo, copy/paste and position locking.

• Live devices — control lights and switches, show sensor readings, and follow doors, windows, shutters, awnings and curtains as they open and close. Device labels can sit on any side, or pick the clearest one (labelPosition: auto).

• Lighting — colored light from your lamps and spots, day/night dimming, sunlight, moonlight and ambient daylight.

• Rooms and presence — zoom into rooms, link Home Assistant areas, show presence ripples and track positions from distance sensors.

• Multiple floors — switch between floors or navigate with a staircase.

• Floor summaries — aggregated floor badges (temp, humidity, presence, lights, windows) directly in the switcher.

• Furniture actions — give a piece a tap, hold or double-tap action. A round action icon marks it, or set showIcon: false to make the drawing itself the button. See actions on furniture.

• 2D and 3D views — display the same plan flat or with raised walls and furniture.

• Window sill height — draw floor-to-ceiling or high windows in 3D with sill. See Configuration.

• Outdoor courtyard & 3D stacked house — exterior view of the entire house stacking all levels at physical elevations, with ground slabs and 3D roofs.

• Appearance — choose skins and named colors, add a background image to trace (inverted, or swapped for a dark version, in dark mode), and let the plan scale to your screen.

Installation

HACS (recommended)

Distributed as a custom repository. Add it in one click:

Or add it manually:

1. In Home Assistant, open HACS.
2. Open ⋮ → Custom repositories.
3. Add https://github.com/nicosandller/easy-floorplan with category Dashboard (also called Plugin).
4. Find Easy Floorplan and click Download.
5. Hard-refresh your browser (Cmd/Ctrl-Shift-R).

HACS adds the dashboard resource automatically.

Manual

1. Download easy-floorplan-card.js from the latest release.
2. Copy it to <config>/www/easy-floorplan-card.js.
3. Add a dashboard resource under Settings → Dashboards → ⋮ → Resources → Add:
   • URL: /local/easy-floorplan-card.js
   • Type: JavaScript module
4. Hard-refresh your browser.

Create your first plan

1. Edit your Home Assistant dashboard, select Add card and choose Easy Floorplan.
2. In the visual editor, choose Wall and drag to draw each wall.
3. Choose Door or Window and place it on a wall.
4. Choose + Add → Device, move it into place, then select its Home Assistant entity in the Selection inspector.
5. Save the card and leave dashboard edit mode to try the controls.

The visual editor writes the configuration for you. To start through a Manual card instead, paste this YAML and switch to the visual editor:

type: custom:easy-floorplan-card
overlayScale: plan

Use the element guide for device settings, rooms, trackers and animations. The editor guide explains saving without closing the editor and locking finished elements in place.

Documentation

Guide	What it covers
Editor	Applying changes and locking elements in place.
Editor workspace	Drawing tools, settings tabs, zoom and phone layouts, with screenshots.
Elements and controls	Devices, openings, rooms, trackers and animations, with examples.
Configuration	YAML keys, defaults, coordinates and a complete example.
Lighting	Device light, sun, moon, skylights, ambient daylight and clouds.
Appearance	Skins, colors, line art, SVG export, 3D view, room navigation, scaling and styling.
Behaviour	Actions, visibility, floor navigation and unavailable entities. Behavior → Show code editor sets YAML-only actions, such as popup-card's fire-dom-event, on one element without the whole-card YAML.
Roofs	Roof styles (gable, hip, shed, flat), configuration, overhang, and editing
Outdoor 3D Stacking	Multi-floor exterior elevation, ground slabs, and roof rendering.

See the release notes for published changes and the changelog for documented unreleased changes.

Development

Build commands and test guidance are in Contributing. The local Home Assistant guide explains the Docker demo, its sample plan and the development workflow.

Support

Use Issues to report bugs or request features, and Discussions to ask questions and share your setup.

License

MIT