Display Designer by JDNx Tools

tune Configuration

Resolution:

Available Font IDs (comma-separated): Available Color IDs (comma-separated):

widgets Elements

This Software is Free and Open Source Software licensed under the GPL 3.0

edit Properties

Select an element from the list on the left.

Position:

X 0swap_horiz

Y 0swap_vert

Color:

Font ID:

Text or Format String: Arguments(Optional): Alignment:

Icon Ligature (Find Names):

Width:

Height:

Width:

Height:

Line Thickness (Preview Only):

Corner Radius (Preview Only): 0px

Fill Rectangle

Radius:

Fill Circle

visibilityPreview

Note: Fonts & corners are approximations. If preview shows names instead of actual Icon, select the element/Icon list on left panel or ensure the Front ID is "id(material_symbol_size)"

code Generated Lambda Code

font_download Generate Font Code

Generates a template based on used Font IDs. Verify file paths and types!

info About ESPHome Display Designer

Key Features

Design ESPHome display layouts visually
Support for text, icons, shapes, and bars
Live preview with Material Icons
Export to ESPHome-compatible code
Save/load designs

Known Limitations

Font previews are approximate
All Material Icons will not appear in search window.
Need search to Icon Names from https://fonts.google.com/icons manually
Corner radius is preview-only
Some Material Icons may not render correctly
UI does not render properly on a Mobile Device>

Known Bugs

Import YAML feature is broken
On page reload need to click on elements name for Icons to display
Screen Resolution beyond 480px overflows in UI