The definitive Home Assistant custom integration for building fully custom, dynamic dashboard cards — entirely through a visual drag-and-drop interface. No YAML, no code, just design.
What is Card Builder?
Card Builder is a Home Assistant custom integration that provides two core capabilities:
- Card Builder — A full-featured visual editor (custom panel) where you design cards using drag-and-drop blocks, configure properties, apply styles, and bind data to your entities.
- Card Renderer — A custom Lovelace card (
custom:card-builder-renderer-card) that renders your designed cards in any Home Assistant dashboard, with live entity data and full interactivity.
Key Features
Visual Drag-and-Drop Builder
Design your cards in a dedicated full-screen builder with a central canvas and configurable sidebars. Drag blocks from the palette, arrange them visually, and see your changes in real time.
Modular Block System
Cards are composed of individual blocks that can be nested, moved, and customized.
Smart Entity Binding
Every block can be connected to Home Assistant entities. The entity inheritance system lets you set an entity once at the card level and have it automatically flow down to all child blocks — no need to repeat configuration.
Reusable Cards with Entity Slots
Define entity slots in your card to turn it into a reusable template. When you place the card in a dashboard, you simply pick which entity to use for each slot. Update the card design once, and every instance updates automatically.
Full CSS Styling Control
Every block exposes the full spectrum of CSS styling properties — typography, colors, backgrounds, borders, spacing, effects, and more. Blocks with sub-components (like Entity State with its value and unit) allow independent styling of each part through style targets.
Dynamic Style Binding
Go beyond static values — bind any style property to entity state. Five binding modes are available: Direct (with range mapping), Map, Threshold, Condition (with logical operators), and Template. Make a background change color based on temperature, adjust opacity based on brightness, and much more.
Configurable Actions
Assign actions to blocks and their sub-components using tap, double tap, and hold triggers. Supported actions include toggle, call service / perform action, navigate, more info, open URL, and more. Actions are defined through action slots and can be configured at the dashboard level for maximum reusability.
Visual Entity Links
Draw SVG connection lines between blocks with the Link block — a special block created via the header bar toggle. Links support multi-point paths with line and Bézier curve segments, point anchoring to other blocks, and animated particle flow driven by entity state. Ideal for energy flow diagrams, system topologies, and any card that needs to visualize relationships between entities.
