Everything you need to build
stunning touchscreen UIs.
Drag widgets, style properties, export YAML - all from one canvas.
Video Tutorial
Build a basic dashboard from scratch in under 4 minutes.
Interface Overview
The four panels that make up your workspace
Header Bar
Contains the main title and action buttons:
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.
Working with Widgets
Drag, drop, resize, and style
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.
Reparenting (Nesting)
Drag a widget over a container and hold for ~350ms to drop it inside (dashed outline turns solid green on dwell). Drag a nested widget outside its container by more than 20px to break it out to an ancestor or the canvas root. Cross-container moves reset the child position to (0, 0).
Cycling Overlapping Widgets
Hold ⌘/Ctrl and click to cycle through stacked widgets at the click point when multiple widgets overlap.
Grouping
The four panels that make up your workspace
What is a Group?
Any container with children (obj, button, tabview, etc.) can be marked as a group. Groups are locked by default - clicking or dragging a child bubbles up to the group so you can move or resize the whole thing as one unit.
Entering and Exiting a Group
Double-click a group to enter its scope - children become individually selectable and movable. Press Escape to exit back to the parent scope. Groups can be nested to any depth; entering only unlocks one level at a time.
Making a Group
Select a container with at least one child and press ⌘G (or use the Make Group action from the context menu or sidebar hover). This toggles the container's isGroup flag.
Ungrouping
Press ⌘⇧G or pick Ungroup from the context menu to unwrap the group - children are moved up into the parent container and the group wrapper is removed.
Resizing a Group
Dragging the resize handle on a group scales all its children proportionally, preserving their relative layout.
Snap & Alignment Guides
The four panels that make up your workspace
Grid Snap
Widgets snap to a 10px grid during move and resize. Hold Alt (⌥) to bypass the grid for pixel-precise positioning.
Edge & Center Alignment
Pink dashed guides appear when a widget's edge or center lines up with a sibling, the canvas center, or the canvas padding boundary.
Equal Spacing
When a widget sits equidistant between two siblings, a pink pill shows the matching spacing so you can build evenly distributed layouts.
Aspect Ratio Lock
Hold Shift while dragging the resize handle to preserve the widget's original aspect ratio.
Canvas Management
Multi-screen designs made simple
Canvas Tabs
Create multiple canvases to organize different screens or layouts:
Canvas Properties
Each canvas has adjustable width and height in pixels. This represents the target display size for your ESP32 device.
Preview Mode
The four panels that make up your workspace
Opening Preview
Press ⌘P or click the Preview button in the header to open an interactive preview of the current canvas. Press Escape or click the close button to exit.
Interactive Widgets
In preview mode, widgets respond to user input the way they would on a real device:
Display Filters
Preview mode honors the canvas e-paper and invert-color settings so you can see how your design looks on the target display technology.
Undo & Redo
The four panels that make up your workspace
Scope
Every canvas tab keeps its own undo history. Switching tabs does not clear history - each tab remembers its own timeline of edits.
What's Tracked
Widget add / delete / move / resize, property edits, grouping / ungrouping, reparenting (drag to nest), and YAML import all produce a history snapshot. Auto-saved layout restoration and purely UI-level actions (panel resize, theme toggle) are not tracked.
Shortcuts
Use ⌘Z to undo, ⌘⇧Z or ⌘Y to redo. The buttons in the canvas toolbar mirror the shortcuts.
Component Library
The four panels that make up your workspace
Browsing Packs
Click the Components link in the header to browse ready-made designs grouped into packs (Smart Home, Retro, WiFi Setup, Round Displays, and more). Free packs are always available; pro packs show a preview and unlock after purchase.
Customizing a Component
Open any component for a preview plus a properties panel where you can tweak text, colors, and numeric params before bringing it into your design.
Adding to the Canvas
Use the "Add to Designer" action to drop the component into the currently active canvas tab. The component is imported as a fully-editable widget tree - you can ungroup it, tweak widgets individually, or rearrange layers afterwards.
Property Types
Position, size, color, and more
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.
Saving, Importing & Exporting
The four panels that make up your workspace
Auto-Save
Your work is automatically saved to browser local storage whenever you make a change - widgets, canvas settings, and undo history all persist across reloads. You can trigger an explicit save with ⌘S.
Export YAML
Press ⌘E or click the YAML button to open the export modal. You can export just the active tab or multiple tabs as a multi-page ESPHome lvgl config. The generator emits per-widget properties, grid / flex layout blocks, and a deduplicated top-level image: section for any images referenced by URL.
Import YAML
Press ⌘I or click Import to paste an ESPHome YAML config. The importer auto-detects whether the YAML is a full ESPHome document or a simple widget array, resolves top-level image: definitions back into widget properties, and can either replace the active canvas or append to it. Each import is a single undo step.
Image Assets
Image and imagebutton widgets reference public URLs - ESPHome downloads and bakes the image into firmware at compile time. The image_resize property and the widget dimensions stay in bidirectional sync on the canvas.
Widget Gallery
21 widgets ready to drag onto your canvas