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.
Card Builder is a Home Assistant custom integration that provides:
-
Panel — 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. -
Marketplace — A dedicated platform at cardbuilder.pro where you can browse, download, and share cards created by the community. Register for free to publish your own cards and discover ready-made designs created by other users.
The Card Builder Marketplace at cardbuilder.pro is the official hub for the Card Builder community. It's a place where users can share their creations and find inspiration from others.
What you can do:
- Browse & download — Explore a growing library of ready-made cards created by the community. Find designs for energy monitoring, climate control, media players, and much more — then import them directly into your Home Assistant instance with a single click.
- Share your cards — Publish the cards you've designed so that other users can benefit from your work. Each card can include a description, screenshots, and tags to make it easy to discover.
- Stay up to date — Follow your favourite designers and get notified when new cards are published.
→ Register for free at cardbuilder.pro and start sharing your cards with the community today!
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.
Cards are composed of individual blocks that can be nested, moved, and customized. Blocks are organized into categories: Basic, Layout, Entities, and Controls — from simple text to complex slider controls.
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.
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.
→ Properties Panel – Entity Slots
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.
Choose between flow (document-order) and absolute positioning for each block. Absolute positioning supports 9 anchor points, both pixel and percentage units, and customizable origin points for precise, responsive layouts.
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.
Save and reuse sets of style configurations as presets. Apply a preset to instantly style a block, or use preset inheritance to create a consistent design system across all your cards.
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.
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.
A full management panel with dashboard overview, card list with search/sort/pagination, card creation, editing, duplication, deletion, and JSON import.
Upload, browse, and select images directly within the builder through a built-in media manager. Files are stored locally in your Home Assistant instance and can be used in Image blocks or as background images on any block via the Styles panel.
- Open HACS in your Home Assistant instance
- Go to Integrations
- Click the ⋮ menu → Custom repositories
- Add the repository URL and select Integration as category
- Search for "Card Builder" and install it
- Restart Home Assistant
- Go to Settings → Devices & Services → Add Integration and search for "Card Builder"
- Download the latest
card_builder.ziprelease file from the GitHub releases page - Create the
card_builderfolder into yourconfig/custom_components/directory and extract the contents of the zip file - Restart Home Assistant
- Go to Settings → Devices & Services → Add Integration and search for "Card Builder"
Once installed, the Card Builder panel will appear in the Home Assistant sidebar.
| Document | Description |
|---|---|
| Panel Overview | Management panel, card list, navigation |
| Builder Overview | Builder layout, canvas, header controls |
| Blocks Reference | All available block types and their properties |
| Link Block | Visual connection lines, path editor, flow animation |
| Layers Panel | Layer tree, block selection, ordering |
| Properties Panel | Block properties, entity configuration, slots |
| Styles Panel | CSS styling, positioning, presets, bindings |
| Actions Panel | Actions, triggers, action slots |
| Media Manager | Upload, browse, and select images |
| Card Renderer | Dashboard usage, card editor, slot configuration |
Note: Execution order and priorities are not yet defined — items listed below are goals under consideration.
-
Configurable actions for each block (tap / double tap / hold): Allow users to assign different interactions to individual blocks so the same block can perform different behaviors depending on the gesture. This enables richer, context-sensitive control and automation triggers.
-
Export of created card for sharing — Enable exporting as shareable JSON artifacts, making it easy to share configurations or move them between systems.
-
Marketplace for sharing and downloading ready-made cards/templates — Create a discoverable marketplace where members can publish and download templates.
-
History (undo/redo) for any modification — Implement a reliable undo/redo system so users can confidently experiment and revert changes at any granularity.
-
Domain-specific blocks (light, fan, switch, etc.) — Offer pre-configured blocks tailored to Home Assistant domains so entity-specific controls, states, and actions are handled with minimal setup and proper UX.
-
** [PRO Version] Responsive containers** — Create cards that gracefully adapt their layout and appearance depending on where they are displayed — for instance, rearranging blocks or changing font sizes for smaller screens.
-
** [PRO Version] Animations** — Animate card, blocks, and any single block style property to create dynamic cards
-
** [PRO Version] Save and reuse sets of preconfigured blocks as templates** — Allow users to save a selection of blocks as a reusable template or snippet to speed up assembly of common layouts and patterns.
-
** [PRO Version] Cloud backup of save history for quick restore** — Offer optional cloud storage for save history to support recovery from accidental deletion and automatic backups.
-
** [PRO Version] Internal AI agent for automated card generation** — Integrate an internal assistant/agent to help generate or suggest card layouts and templates automatically from high-level prompts or entity lists.
This project is licensed under the AGPLv3 License.
Contributions are welcome! Please open an issue or pull request on the GitHub repository.
