$ show studiobts/home-assistant-card-builder
This repository implements a Home Assistant custom integration that adds a visual, drag-and-drop card builder for Lovelace dashboards. Users can design custom dashboard cards by composing blocks (text, icons, gauges, charts, weather, etc.) in a canvas, configuring styles, entity bindings, and actions—all without writing YAML or code. The system includes a dedicated panel within Home Assistant, a custom Lovelace card renderer (`custom:card-builder-renderer-card`) for runtime display, and a marketplace for sharing cards via cardbuilder.pro. Architecturally, the project is split into a Python backend (`custom_components/card_builder/`) and a TypeScript/Lit frontend (`frontend/`). The backend handles integration setup, WebSocket APIs for CRUD on cards, presets, media, and account management. The frontend is a single-page application with panel views (dashboard, card list, editor), a designer canvas with Moveable-based manipulation, and a block system where each block declares its configuration, editor UI, and rendering logic. Key subsystems include a style resolver with preset inheritance and entity bindings (direct, map, threshold, condition, template), a drag-and-drop manager with adapters for canvas and containers, a chart data provider for history/statistics, and a document model with versioned migration. The codebase demonstrates high craftsmanship in its block abstraction, style system, and binding engine—patterns that could be extracted for other visual editors. However, some files are large and tightly coupled, with lingering FIXME comments and a few fragile DOM workarounds. The integration is actively maintained, with a clear roadmap and pro version planned, though the external marketplace dependency introduces some risk.
The LLM identified 4 files worth highlighting for reuse:
A factory that registers and resolves trait renderers for different property types (slider, select, checkbox, color, entity picker, etc.). It decouples property panel rendering from concrete components, allowing new trait types to be added by registration. This pattern is reusable in any property editor system that needs extensible renderers.
Evaluates style bindings in five modes: direct (static value), map (key-value mapping), threshold (range-based), condition (boolean expression), and template (placeholder substitution). It resolves entity state, attributes, and slot references, returning computed CSS values. The engine is self-contained and could be reused in any system needing dynamic property binding to external data sources.
Resolves block styles by merging from multiple sources: block-specific, container overrides, style presets, theme mode overrides, and dynamic bindings. It supports a fallback chain and outputs CSS property objects. The architecture of layered style resolution with preset inheritance is a reusable pattern for any theming or styling engine.
Coordinates all drag-and-drop interactions in the card designer using pluggable adapters (source, canvas, block, container). It manages drag state, auto-scrolling, drop indicators, and restriction enforcement. The adapter-based design allows the DnD logic to be reused across different UIs with minimal modification.