Display Designer by JDNx Tools

tune Configuration

Resolution:

Custom Width:

Custom Height:

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

widgets Elements

Release v6.2.Sindoor. 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

Support for text, icons, shapes, and bars. Triangles - coming soon
Live preview with Material Icons
Export to ESPHome-compatible code
Export and import 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 {ESPHome limitation}
Some Material Icons may not render correctly
UI does not render properly on a Mobile Device>

Known Bugs

Import TXT file feature has issues
On page reload need to click on elements name for Icons to display correctly
Screen Resolution beyond 480px overflows in UI and scaling button has to be used.