The Visual Card Builder.
A full-screen drag-and-drop editor purpose-built for Home Assistant. Design cards visually using blocks, see live entity data, and publish to your dashboard — without writing a single line of YAML or code.
- Live
- Entity data preview
- 2
- Sidebar panels
- Drag
- and drop blocks
- 9
- Anchor points
Your Design Space, Live and Interactive
The canvas is the heart of the builder — a live preview of your card where every change is immediately visible with real entity data from your Home Assistant instance.
Drag & Drop Placement
Drag any block from the palette and drop it directly onto the canvas or inside a layout block. Reorder and nest freely.
Live Entity Data
The canvas renders your card with real data from your Home Assistant entities as you design — what you see is exactly what appears on your dashboard.
Contextual Toolbar
Select any block to reveal a contextual toolbar with quick actions: duplicate, delete, move to layer, switch positioning mode, and more.
Block Outlines
Toggle dashed outlines on all blocks to visualize boundaries, spacing, and layout structure during design — then hide them for a clean preview.
Everything You Need, Right Where You Need It
The builder is organized around two focused sidebars that keep your design tools and block controls always at hand.
Left Sidebar — Blocks & Layers
Blocks
The block palette, organized into four categories: Basic, Layout, Entities, and Controls. Drag any block onto the canvas to start using it.
Layers
A full layer tree showing the complete hierarchy of your card's blocks. Click to select, drag to reorder, and inspect nesting at a glance.
Right Sidebar — Configure, Style & Interact
Properties
Configure the selected block's data — text content, icon, entity binding, image source, entity slots, slider range, and more.
Styles
Control every visual aspect of the selected block — positioning, dimensions, typography, color, background, border, spacing, effects, and dynamic bindings.
Actions
Assign interactive behaviors to the block: tap, double tap, or hold. Supports toggle, call service, navigate, more info, open URL, and reusable action slots.
Flow or Absolute — You Choose
Every block can operate in one of two layout modes. Switch freely between them at any time from the Styles panel.
Flow
Blocks stack in document order. The card respects flex direction, gap, and alignment. Ideal for responsive, content-driven layouts.
- Follows flex direction (row / column)
- Configurable gap and alignment
- Order controlled via the Layers panel
- Responsive by nature
Absolute
Blocks are positioned freely on the canvas. Drag them anywhere, resize with handles, and anchor to any of 9 reference points.
- 9 configurable anchor points
- Pixel or percentage units
- Visual drag-to-position on canvas
- Resize handles for width & height
Global Card Controls at Your Fingertips
The header bar sits above the canvas and provides card-level controls that affect your entire design in one place.
Entity Slots
Open the entity slots manager to define reusable entity references for the entire card.
Action Slots
Open the action slots manager to define reusable actions assignable to any block.
Media Manager
Browse and upload images directly from within the builder to use in any block.
Container Selector
Switch between responsive breakpoints (Desktop, Tablet, Mobile) to design adaptive card layouts.
Link Drawing
Toggle link drawing mode to create SVG connection lines between blocks.
Actions Preview
Enable action mode on the canvas to test block interactions exactly as they behave on the dashboard.
Ready to Start Designing?
Install CardBuilder on your Home Assistant instance and open the builder — it's free to start.