User Guide

Header Bar

Contains the main title and action buttons:

• •YAML - Export current design as YAML
• •Preview - Open interactive preview mode
• •Import - Import YAML configuration
• •Help - Access help and documentation

Toolbox (Left Panel)

Contains all available widgets organized by category. Drag widgets onto the canvas to add them to your design.

Canvas (Center Area)

The main editing area where you place and arrange your widgets. Represents your display.

Properties Panel (Right Sidebar)

Shows properties of the selected widget. Adjust position, size, colors, and other widget-specific settings.

Adding Widgets

Drag any widget from the Toolbox onto the canvas to add it. You'll see a preview as you drag.

Selecting Widgets

Click on any widget to select it. Selected widgets show a blue highlight. Use the properties panel to modify.

Moving Widgets

Drag a selected widget to move it. Use arrow keys for 1-pixel increments.

Resizing Widgets

Use the Width and Height fields in the properties panel to resize widgets.

Deleting Widgets

Select a widget and press Delete or Backspace to remove it from your design.

Canvas Tabs

Create multiple canvases to organize different screens or layouts:

• •Click "+" to add a new canvas
• •Click the X to delete a canvas
• •Click a tab to switch between canvases
• •Customize canvas dimensions in the left sidebar

Canvas Properties

Each canvas has adjustable width and height in pixels. This represents the target display size for your ESP32 device.

Position (X, Y)

Coordinates in pixels from the top-left corner of the canvas.

Size (Width, Height)

Dimensions in pixels.

Colors

Use the color picker or enter hex values (#RRGGBB) or LVGL hex format (0xRRGGBB).

Text

Text content for labels, buttons, and other text widgets.

Auto-Save

Your designs are automatically saved to local storage whenever you make changes. Use Ctrl/Cmd + S to save manually.

Export YAML

Click the YAML button to generate ESPHome-compatible YAML code for your configuration.

Import YAML

Click Import to load a previously exported YAML file back into the designer for editing.