SMARTi watermark
Drag & Drop Card Wiki · Section 02

Installation

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
GitHub repo
Demo focus
Drag, resize, snap, export.
Add screenshots from admin to turn this section into a richer visual guide.

Installation

Drag & Drop Card is installed as a Home Assistant custom card via HACS. Once the frontend resource is loaded, the card can be added to a Lovelace dashboard like any other custom card.



NB! The Drag and Drop Card is a TWO part installation. The card itself and the backend integration. Both installations are covered below.


Use HACS when possible. It makes updates easier and reduces the chance of loading the wrong JavaScript file. This wiki does NOT cover manual installation. That is described in the repo.

How to install the Drag & Drop card itself via HACS

  1. Add this repository as a Custom Repository in HACS. Select "Dashboard" As type when adding it.
  2. Search for "Drag and Drop Card" in HACS
  3. Click the download button. ⬇️
  4. The card is now available as a custom card in the Native Home Assistant Card Selector when adding new cards to a dashboard.

How to install the backend integration via HACS

  1. Add this repository as a Custom Repository in HACS. Select "Integration" As type when adding it
  2. Search for "Drag and Drop Card Backend" in HACS
  3. Click the download button. ⬇️
  4. Restart Home Assistant
  5. Go to Settings -> Devices And Services And search for the "Drag And Drop Card Backend Integration" And add it. 

Quick check

If the card appears but the layout does not stay after refresh, check the storage key, browser cache, backend support, and whether the dashboard is loading the newest resource file.

Image slotAdd screenshots for HACS installation, resource setup, and first successful load.
Last updated 2026-05-30.