$ show koosoli/ESPHomeDesigner
ESPHome Designer is a Home Assistant custom component that provides a visual drag-and-drop editor for designing display layouts on ESP32/ESP8266 devices running ESPHome. It supports multiple rendering protocols including native ESPHome C++ lambdas, LVGL, OpenEPaperLink (OEPL), and OpenDisplay (ODP). The editor features a canvas with zoom/pan, snap-to-grid, drag-and-drop, lasso selection, and a property panel for configuring widget attributes. Widgets are organized as plugins, each providing render, export, and lifecycle hooks for all supported output formats. The system can generate complete ESPHome YAML configurations including hardware definitions, sensor registrations, font loading, and display lambdas. The architecture is split between a Python backend (Home Assistant integration) and a JavaScript frontend (Vite-built SPA). The backend provides REST APIs for layout CRUD, entity history proxying, image/RSS proxying, hardware profile management, and PNG rendering. The frontend manages state via an AppState singleton with undo/redo, communicates with the backend through a bridge, and supports offline YAML parsing. An AI integration allows generating layouts from natural language prompts using multiple providers (Gemini, OpenAI, OpenRouter). The codebase demonstrates strong engineering practices with a plugin-based architecture, adapter pattern for multi-format export, schema-driven property panels, and extensive test coverage (200+ Vitest tests plus Python tests). It is actively maintained with CI/CD pipelines, quality gates, and regular releases. While the widget plugin surface is large and some legacy modules coexist with newer code, the overall design is modular and extensible.
The LLM identified 5 files worth highlighting for reuse:
A generic property panel renderer that reads a declarative JSON schema from widget plugins and generates form controls (inputs, selects, color pickers, sliders, etc.). This pattern decouples UI rendering from widget logic and can be reused in any application requiring dynamic form generation from a schema.
Abstract base class defining the interface for output format adapters (ESPHome, OEPL, OpenDisplay, C). Subclasses implement generate(), generatePage(), generateWidget() to produce format-specific YAML or code. This clean adapter pattern enables adding new output formats without modifying widget plugins.
Undo/redo manager that deep-clones the application state on each mutation and maintains a history stack with configurable depth. Provides undo(), redo(), pushState(), and clear() methods. This is a generic, reusable implementation of the command pattern for state management.
A collection of pure functions for color conversion between hex, RGB, HSL, and named colors, plus color manipulation (lighten, darken, blend). No dependencies on the rest of the codebase, making it directly reusable in any JavaScript project needing color utilities.
A font registry that deduplicates Google Font declarations, clamps font weights to valid ranges, and tracks icon codepoints per font size. It collects font requirements from all widgets and produces a consolidated font configuration for YAML export. This pattern is reusable in any application that needs to manage web fonts or icon fonts across multiple components.