Getting Started
Follow these steps to create your first ESP32 UI - from blank canvas to deployed device.
Video Tutorial
Build a basic dashboard from scratch in under 4 minutes.
Create a New Canvas
When you start the designer, you'll see the main canvas area in the center. The default canvas is 240x320 pixels (typical for small displays).
Add Widgets
Click on the Toolbox panel on the left side to see available widgets. Drag a widget from the toolbox onto the canvas to add it.
- •Button - Interactive clickable buttons
- •Label - Text display elements
- •Slider - Value selection control
- •Switch - Toggle on/off control
- •Container - Group widgets together
- •And many more...
Configure Properties
Click on any widget to select it, then use the properties panel on the right to customize it.
- •Set position (X, Y coordinates)
- •Set dimensions (width, height)
- •Change colors and styling
- •Add text or other content
- •Configure widget-specific options
Preview Your Design
Click the Preview button in the header to see an interactive preview of your UI.
- •Interact with buttons and controls
- •See how your design looks and functions
- •Test responsiveness and layout
Export YAML
When you're happy with your design, export it to ESPHome-compatible YAML.
- •Click the YAML button in the header
- •Copy the generated YAML code
- •Paste it into your ESPHome configuration file
- •Deploy to your ESP32 device
Useful Tips
Save Your Work
Designs are automatically saved to local storage. Export YAML files as backups.
Keyboard Shortcuts
Use arrow keys to move widgets, Delete to remove them. Check the shortcuts modal for more.
Dark Mode
Toggle dark/light mode in the top-right corner for comfortable work in any lighting.
External Resources
Ready for more?
Dive into the complete User Guide for detailed feature documentation.