Imagine tapping a room on your tablet and the lights turn on. Glancing at your wall panel and seeing every sensor, camera, and device on a visual map of your actual home. That's what a floorplan dashboard gives you. This guide shows you how to build one, from simple image overlays to fully animated SVG plans.
Jump to a section
A floorplan dashboard replaces the standard list of entities with a visual, bird's-eye view of your home. Instead of scrolling through switches and sensors, you see your actual rooms with interactive controls placed exactly where devices are located.
Tap a room to toggle lights. Tap a thermostat icon to adjust temperature. Tap a camera to see the live feed. Every entity becomes a clickable element on your map.
Rooms glow when lights are on. Temperature readings update live. Motion sensors flash when triggered. Door sensors show open or closed. Your entire home at a glance.
Mount a tablet on the wall, open your floorplan dashboard, and you've got a command center. Guests intuitively understand it because they can see which room is which.
Home Assistant offers multiple approaches depending on how much time you want to invest and how fancy you want the result to look.
| Method | Difficulty | Visual Quality | Animations | Best For |
|---|---|---|---|---|
| Picture Elements Card | Easy | Good | Limited | Quick setup, beginners |
| HA Floorplan (SVG) | Medium | Excellent | Full CSS + SVG | Interactive, animated plans |
| 3D Rendered Image | Advanced | Stunning | Limited (image overlay) | Show-off dashboards |
Our recommendation: Start with Picture Elements. It takes 30 minutes to get a working floorplan. You can always upgrade to HA Floorplan or a 3D render later.
Every method starts with an image of your home's layout. Here are the best tools for creating one.
Free tier available | Web-based
The most popular choice for Home Assistant floorplans. Draw your rooms with exact dimensions, add furniture if you want, then export as a PNG. The 2D view works perfectly as a dashboard background. Clean lines, professional look, zero learning curve.
Free, open source | Windows/Mac/Linux
Desktop app that lets you model your home in 2D and 3D simultaneously. Draw walls, add doors and windows, furnish rooms, then export either a top-down 2D view or a rendered 3D perspective. Great for creating those eye-catching isometric views.
Free | For HA Floorplan card
If you're going the HA Floorplan route, you need an SVG file with named layers and elements. Inkscape (desktop, free) or Figma (web, free tier) let you draw vector floorplans where each room, light, and sensor gets its own ID that Home Assistant can target with CSS.
The Picture Elements card is built into Home Assistant. You set a background image (your floorplan), then position entity icons, state labels, and service call buttons on top of it using percentage-based coordinates.
/config/www/ (accessible via File Editor or Samba add-on)/local/floorplan.pngtype: picture-elements
image: /local/floorplan.png
elements:
# Living room light (tap to toggle)
- type: state-icon
entity: light.living_room
style:
top: 45%
left: 30%
"--paper-item-icon-color": >-
{{ 'var(--leaf-400)' if is_state('light.living_room', 'on')
else 'var(--sand-500)' }}
# Kitchen temperature
- type: state-label
entity: sensor.kitchen_temperature
style:
top: 25%
left: 65%
color: white
font-size: 14px
# Front door lock
- type: state-icon
entity: lock.front_door
style:
top: 85%
left: 50%
tap_action:
action: toggle
# Camera feed (tap to show)
- type: state-icon
entity: camera.backyard
icon: mdi:cctv
style:
top: 10%
left: 80%
tap_action:
action: more-infoMake rooms visually change based on state. For example, add a colored overlay that appears when lights are on:
# Room glow overlay
- type: conditional
conditions:
- condition: state
entity: light.living_room
state: "on"
elements:
- type: custom:html-element
tag: div
style:
top: 45%
left: 30%
width: 20%
height: 25%
background: "rgba(62, 99, 48, 0.15)"
border-radius: 8px
pointer-events: noneThe ha-floorplan custom card uses SVG files where each room, device, and sensor is a named element. Home Assistant targets these elements with CSS rules and JavaScript bindings, creating truly dynamic, animated floorplans.
Rooms can smoothly change color based on temperature. Lights can glow, pulse, or dim to match their actual brightness. Door icons can rotate to show open/closed state.
Since elements are part of the SVG itself, everything aligns perfectly. No guessing percentage coordinates. Your light icon sits exactly where the light fixture is drawn.
Bind entity states directly to SVG text elements. Temperature readings, humidity percentages, power consumption numbers all update in real time within the plan itself.
id="light.living_room")/config/www/floorplan//* Room fills based on light state */
.light-on {
fill: rgba(255, 220, 100, 0.2);
transition: fill 0.5s ease;
}
.light-off {
fill: rgba(0, 0, 0, 0);
transition: fill 0.5s ease;
}
/* Temperature color scale */
.temp-cold { fill: rgba(66, 133, 244, 0.15); }
.temp-comfortable { fill: rgba(76, 175, 80, 0.1); }
.temp-warm { fill: rgba(255, 152, 0, 0.15); }
.temp-hot { fill: rgba(244, 67, 54, 0.15); }
/* Door open/closed */
.door-open { transform: rotate(-90deg); transform-origin: left center; }
.door-closed { transform: rotate(0deg); }
/* Motion detected pulse */
.motion-detected {
animation: pulse 1s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.8; }
}For the ultimate visual impact, create a 3D model of your home and render it as a high-quality image. The rendered image becomes your dashboard background, with interactive elements layered on top using Picture Elements.
Free, open source
Draw walls in 2D, see the 3D model update in real time. Huge library of free furniture models. Export top-down or isometric views at any resolution. The community favorite for Home Assistant 3D floorplans.
Free, open source
Professional 3D modeling and rendering. Steeper learning curve, but produces photorealistic results. If you want your floorplan to look like an architectural visualization, Blender is the way to go.
Free tier, web-based
Same tool as the 2D version, but with a 3D view toggle. Less control than Sweet Home 3D, but you can go from zero to a decent 3D render in under an hour without installing anything.
Top-down views are easier to work with for placing interactive elements (straight grid, simple coordinates). Isometric/3D perspective views look more impressive but make element positioning trickier because of the angle distortion. For a first build, go top-down. Add the isometric view later as a "wow" upgrade.
A floorplan dashboard reaches its full potential when it's always visible. Wall-mounted tablets turn your floorplan into a smart home command center that anyone in the house can use.
~$100 / 10.1" display
Install Fully Kiosk Browser (via ADB sideload) for kiosk mode with screen wake on motion. Good enough display, great price. The most popular choice in the HA community.
~$180 / 10.4" display
Better display quality, runs the official Home Assistant Companion app natively. Smoother animations and faster response for complex floorplans with many elements.
~$350 / 10.9" display
Best display quality and smoothest performance. The Home Assistant Companion iOS app is excellent. Use Guided Access for kiosk mode. Overkill for most, but gorgeous.
Create separate floorplan views for each floor of your home. Add navigation buttons (or swipe gestures) to switch between them. This keeps each view clean and focused instead of cramming everything into one image.
Put your floorplan on the left (or top), and regular cards on the right (or bottom). Temperature graphs, weather, energy usage, or a camera grid. The floorplan provides the overview, cards provide the detail.
Use tap for the most common action (toggle light) and hold for secondary actions (open brightness slider, show more-info). This keeps the interface clean while still giving you full control.
If you use a dark HA theme, make your floorplan image dark too. Match the wall colors to your theme's card background. Match text colors. Consistent theming makes the whole thing feel like a real product, not a DIY hack.
Don't try to add every device on day one. Start with lights in the main rooms. Once that works and looks good, add temperature sensors. Then cameras. Then door sensors. Building it up gradually means each addition gets placed thoughtfully.
Install card-mod for custom CSS styling on any card. Use browser-mod for popup dialogs when tapping floorplan elements. Layout-card helps position the floorplan alongside other cards exactly how you want.
Here's a realistic timeline for building a great floorplan dashboard from scratch.
Draw your floorplan
Use Floorplanner or Sweet Home 3D. Measure your rooms (roughly is fine). Export a clean PNG. 1-2 hours.
Build the Picture Elements card
Upload image, add entity icons for your main lights and sensors. Get the positioning right. 2-3 hours.
Polish and expand
Add conditional styling, room glow effects, more devices. Set up a dedicated dashboard view. Optionally mount a tablet. 2-4 hours.
Before building your floorplan, check which of your current smart home devices are compatible. Our free scan tells you exactly what works, what needs a bridge, and what you might want to replace.
Scan Your Devices FreeFor most people, Floorplanner.com (free web tool) combined with the built-in Picture Elements card is the best starting point. It takes the least effort and produces clean results. If you want animations and dynamic styling, upgrade to HA Floorplan with an SVG created in Inkscape or Figma.
Yes, if you have architectural drawings or a builder's plan, you can use that as your background image. Scan or photograph it, clean it up in an image editor if needed, and use it directly in a Picture Elements card. Some people also trace over their real plans in Inkscape to create a cleaner SVG version.
Yes. All entity states update via Home Assistant's WebSocket connection. When a light turns on, the icon changes immediately. When a temperature sensor reports a new value, the label updates. There's typically less than a second of delay.
There's no hard limit, but more than 30-40 visible elements on a single view starts to feel cluttered. Use multiple views (one per floor), conditional visibility (only show details when you tap a room), or a combination layout with the floorplan alongside regular cards for detailed info.
Absolutely. Create a separate dashboard view for each floor, each with its own Picture Elements card and floorplan image. Add navigation buttons or use swipe navigation to switch between floors. Some people also use a small overview image with clickable zones that link to each floor's detailed view.
Inspiration for every dashboard style, from minimalist to data-heavy.
The best smart bulbs, switches, and LED strips for Home Assistant.
Add security cameras and Frigate NVR to your Home Assistant setup.
Everything you need to get started with Home Assistant from scratch.