Home
Welcome to the Button Builder documentation! This visual designer helps you create beautiful button-card configurations for Home Assistant without writing YAML by hand.
| Getting Started | Configuration | Advanced |
|---|---|---|
| Installation | Configuration Options | Advanced Features |
| Getting Started | Style Presets | Templates and Variables |
| FAQ | Actions and Interactions | Troubleshooting |
- Real-time Preview - See changes instantly as you configure
- Split-panel Interface - Editor on left, live preview on right
- Responsive Preview - Test how buttons look at different sizes
- Canvas Backgrounds - Preview against different dashboard backgrounds
- 80+ Style Presets - Professionally designed one-click styles
- 10 Categories - Minimal, Glass, Neon, Gradient, 3D, Cyberpunk, Retro, Nature, Animated, Icon Styles
- Preset Tracking - See which settings came from presets vs. your modifications
- State-Based Presets - Different presets for ON/OFF states
- Magic Builder - Describe your button in plain English
- Gemini Integration - Uses Google's Gemini AI (free API key)
- Smart Suggestions - AI understands Home Assistant context
- Complete Control - Every button-card option accessible
- Custom Fonts - Google Fonts integration
- 18+ Animations - For cards and icons with triggers
- Templates - JavaScript templates for dynamic content
- State Styles - Conditional formatting based on entity state
- YAML Import - Paste existing button-card configs
- YAML Export - Copy generated YAML to clipboard
- Entity Browser - Browse and select your HA entities
- Dashboard Detection - Load dashboard backgrounds for preview
| Requirement | Version | Notes |
|---|---|---|
| Home Assistant | 2023.0+ | Earlier versions may work but untested |
| button-card | Latest | Install via HACS |
| Browser | Modern | Chrome, Firefox, Safari, Edge |
| HACS | Any | For easy installation |
Button Builder consists of two parts:
- Home Assistant Integration - Registers the sidebar panel
- React Frontend - The visual editor interface
The frontend runs entirely in your browser and communicates with Home Assistant via WebSocket for entity data.
Button Builder generates standard button-card YAML that works with the custom-cards/button-card project. All features are compatible with button-card's specification.
See the Releases page for changelog and version history.