SMARTi watermark
Drag & Drop Card Wiki · Section 01

Overview

A comprehensive and user-friendly guide to creating modern, polished, and fully responsive Home Assistant dashboards using the Drag & Drop Card. This wiki combines clear explanations, practical real-world configuration examples, step-by-step walkthroughs, and visual references where they add the most value — making it easy for both beginners and advanced users to design powerful and visually appealing dashboards.

12 sections Config examples HADS-ready exports
Demo focus
Drag, resize, snap, export.
Add screenshots from admin to turn this section into a richer visual guide.
Drag and Drop Card overview
Drag & Drop Card lets you build Home Assistant dashboards visually instead of positioning every card by hand.

Overview

The Drag & Drop Card is a visual dashboard builder for Home Assistant. It turns a Lovelace view into a canvas where cards can be placed, resized, layered, connected, animated, exported, and shared.

The goal is to make polished dashboards easier to build. You can start as simple as you want or need, expanding by adding tabs, layers, responsive layouts, connectors, a screen saver, packages, and marketplace-ready exports when the dashboard grows.

What this wiki covers

This guide is written for people building real dashboards, not only for people reading YAML. Each chapter explains what the feature is for, when to use it, and which settings matter.

The basic idea

The Drag & Drop Card dashboard is made from one single Home Assistant card and everything tied to it lives within it. The visual editor stores where those cards live on the canvas. Settings such as tabs, layers, screen saver, packages, and connectors decide how the dashboard behaves around those cards.

Best way to learn

Build one small dashboard first. Add three cards, save, refresh, then add tabs and layers. The advanced features make more sense once the basic canvas feels predictable.

Image or GIF slotAdd a clean overview image, short demo GIF, or animated walkthrough here.
Last updated 2026-05-27.