Does this tool require any software installation?
No. ESPHome_UI_Designer is a pure browser‑based tool – just open the web page and start using it, with no downloads or installations required.
OpenNextion
Disconnected
Back to List
CommunityESPHomeSmart HomeHome Assistant
ESPHome UI Designer
ESPHome UI Designer is a browser‑based tool that lets you build custom smart home control panels with drag‑and‑drop simplicity – no coding required. Design your own interface in minutes, then pair it with ESPHome and Home Assistant to create a truly personalized smart home control hub.
Preview
Hardware Requirements
Development Boards
Accessories
Getting Started
Feature Overview
| Feature | Description |
|---|---|
| Drag‑and‑Drop Visual Design | Drag components directly in the browser and adjust positions freely |
| Real‑Time UI Preview | See a near‑final preview of your interface during the design process |
| One‑Click YAML Generation | Automatically generate a ready‑to‑use ESPHome configuration file after design completion |
| Multiple Component Types | Supports switches, multi‑switches, temperature/humidity, covers, lights, screen brightness controls – with more in development |
| Pure Web‑Based Operation | No software installation required – works with a deployed Home Assistant instance |
| Flexible Device Selection | Freely select entities from Home Assistant to control from the screen |
Quick Start
Preparation
- 1 × supported OpenNextion ESP32‑S3 smart display
- 1 × USB data cable
- 1 × ESPHome Builder
- 1 × running Home Assistant instance
- 1 × Windows/Mac computer
- 2.4 GHz WiFi network
Before starting, ensure the USB cable supports data transfer and maintain a stable connection between the board and your computer.
Before You Begin
After opening the ESPHome UI Designer tool, complete the following three basic settings:
- Select your OpenNextion screen model and screen orientation
- Configure the Wi‑Fi information – make sure to connect to the same Wi‑Fi network as your Home Assistant
- Copy the YAML configuration generated in the Build section
First‑Time Flashing
For the first‑time flash, you will need to use ESPHome Builder:
*You can download the ESPHome Builder app from the Home Assistant Add‑on Store, or install ESPHome on your system from the official ESPHome website.
- Create a new device in ESPHome.
- In the device you just created, import and save the YAML configuration you copied in the previous step.
⚠️ Note: Make sure the Wi‑Fi network is 2.4 GHz and is on the same network as your Home Assistant.
- Flash the device
Go back to the dashboard and install the device. For the first‑time flash, it is recommended to select "Plug into this computer". You may also choose "Manual download".
Follow the instructions. Step 1: Download the project .bin file.
Step 2: Open the official ESPHome tool, connect to the serial port, and upload the downloaded .bin file to flash it.
- After flashing is complete, the device will restart automatically.
Connecting to Home Assistant
Once the device connects to Wi‑Fi, it will be automatically discovered in Home Assistant under Settings>Devices & services.
The device also exposes a light entity to Home Assistant by default, so you can control screen brightness directly from the device settings in Home Assistant.
Adding Entities
If you want to control more devices (such as switches, temperature/humidity sensors, etc.) from the screen, you need to follow these steps:
- In ESPHome UI Designer, go to Entities and click Add Entity. The left‑side UI preview will display component modules in real time – simply click and drag them to adjust their positions.
- Configure the entity information – you can set the component type, style, label, color, position, and size.
Among these, the Entity ID is required. Go to Settings>Devices & services>Entities , click on the entity you want to add in its settings page, find its ID, and enter it.
Once created, all settings are saved automatically and the preview updates in real time.
- Copy the YAML script output from the Build section and paste it into the device YAML file in ESPHome Builder, then save.
- Firmware OTA
For firmware updates, you can choose the Wireless (OTA) method:
💡 If you cannot flash the firmware over Wi‑Fi, you may use other methods – refer to the first‑time flashing process for alternatives.
Permission Authorization
When controlling Home Assistant devices from the screen for the first time, you need to authorize the ESP32 device to control other entities in Home Assistant.
Go to Settings>Devices & services>ESPHome Integration, click the configuration icon for your ESP32 device, and select "Allow the device to perform Home Assistant actions" – this enables the ESP32 device to control entities in Home Assistant.
After a successful update, the device will restart, display the final UI, and you can control your smart home devices by touch.
Resources
FAQ
Can I use this tool if I don’t know how to program?
Absolutely. This tool is specifically designed for non‑technical users – you just use the provided components to design your interface, with no coding required at all.
Can the designed interface be directly used on the screen?
Yes. The tool automatically generates a YAML configuration file that ESPHome can recognize – simply follow the steps in the quick‑start guide to import it.
What types of components are currently supported?
Currently supported components include switch, multi_switch, thermo_hygrometer, cover, light, and hmi_screen_brightness. More components are under development.
Do I need to have Home Assistant set up first before using this?
Yes. The ultimate goal of this project is to allow your OpenNextion screen to control devices in Home Assistant, so you need to have a Home Assistant system deployed first.
What should I do if Home Assistant cannot find the device after flashing?
Please make sure your Wi‑Fi is a 2.4 GHz network and that the screen and Home Assistant are on the same local network. If it still cannot be found, try restarting the device or checking whether the Wi‑Fi password is correct.