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
easy-floorplan-overview-v7.mp4
20-second overview: draw walls and doors, connect a Home Assistant entity, control lights, and view the plan in 3D.
- 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 and shutters as they open and close.
- Lighting — colored light from your lamps, 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.
- Furniture actions — give a piece a tap, hold or double-tap action. A round
action icon marks it, or set
showIcon: falseto 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.
- 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, named colors and automatic room tints, add a background image to trace, and let the plan scale to your screen.
Distributed as a custom repository. Add it in one click:
Or add it manually:
- In Home Assistant, open HACS.
- Open ⋮ → Custom repositories.
- Add
https://github.com/nicosandller/easy-floorplanwith category Dashboard (also called Plugin). - Find Easy Floorplan and click Download.
- Hard-refresh your browser (Cmd/Ctrl-Shift-R).
HACS adds the dashboard resource automatically.
- Download
easy-floorplan-card.jsfrom the latest release. - Copy it to
<config>/www/easy-floorplan-card.js. - Add a dashboard resource under Settings → Dashboards → ⋮ → Resources → Add:
- URL:
/local/easy-floorplan-card.js - Type: JavaScript module
- URL:
- Hard-refresh your browser.
- Edit your Home Assistant dashboard, select Add card and choose Easy Floorplan.
- In the visual editor, choose Wall and drag to draw each wall.
- Choose Door or Window and place it on a wall.
- Choose + Add → Device, move it into place, then select its Home Assistant entity in the Selection inspector.
- 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: planUse 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.
| 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. |
| Furniture symbols | Creating and contributing your own symbols. |
| Video walkthrough | A community setup guide in Italian. |
See the release notes for published changes and the changelog for documented unreleased changes.
Build commands and test guidance are in Contributing. The local Home Assistant guide explains the Docker demo, its sample plan and the development workflow.
Use Issues to report bugs or request features, and Discussions to ask questions and share your setup.