Live editor with realtime previews of esphome display component

[pulsar ember]

TL;DR; See video at bottom of post.

Live demo: https://esphome-render.vercel.app/
Project page: https://github.com/gadicc/esphome-render
Community thread: https://community.home-assistant.io/t/demo-live-editor-with-realtime-previews-of-esphome-display-component/766836

Hi All

Firstly, please go easy on me… total newbie here 😅 First HA install a month ago, and first esphome install two weeks ago (and a big shout out to BigBobbas who got me excited about this with his ESP32-S3-Box3-Custom-ESPHome project). So, advance apologies if I’m doing anything totally wrong or unconventionally.

My background is in web dev, where I’ve grown very accustomed to the near instantaneous, iterative development feedback loop. The tooling around updating esphome is absolutely phenomenal, but, waiting to compile/flash/boot every time you make a small change only to realise it’s not quite right can be quite frustrating. Hence this idea was born, focusing specifically on the display component (for now?).

NB: This is a proof of concept only. Most APIs are not implemented yet; code other what’s in the samples in the demo are unlikely to work. Completing the API a huge task and will depend on public interest.

So, trying to gauge interest for this kind of project. Is this useful? Is its utility worth the effort to make everything work? I have a few cool ideas of where this could go if there’s interest, but first I need to understand if anyone would actually use something like this 😅

[fair adder]

Hi there , great to see that you have posted this in here 👍 I think this would also make a great tool for taking screen shots, for documentation rather than taking 'dodgy' photos of the actual device screen. If LVGL could also be supported this would be invaluable imho the ability to view live changes is amazing and a big time and 'hair' saver.

[nocturne sky]

having flashed my LVGL project about 100 times yesterday I can only agree!

[swift basin]

I'll third that this for LVGL would be amazing! Now that LVGL support is out I don't intend to use the older display component. I wonder what @tranquil topaz (the person who ported LVGL) thinks about a simulator like this?

[pulsar ember]

Thanks, everyone!

I never thought to target LVGL before... as I know it already has simulators, but, I guess then you'd still need to need to recompile every time (even if you don't need to flash a device), and real time updates with state would still have value. I think?

Will look into it some more and see how feasible it is and report back 🙂

[granite blade]

Huh, maybe it'll be relatively straightforward 🤔

UIs created with LVGL really work on any platform. We have compiled our demos to HTML files to let you try them out in your browser.
https://lvgl.io/demos

[tranquil topaz]

Using the in-browser C++ simulator, presumably after changes you still have to re-run esphome compile to generate C++ code? I'd be interested to see a more detailed description of how it all works.

[pulsar ember]

Yeah I noticed that! But I need to take a deep dive into everything... because compiling on every step might be too slow (but maybe better than nothing?). I'll have a chance to look at this further sometime next week and will report back!

[pulsar ember]

Thanks for weighing in, @tranquil topaz 🙏 Going to take a proper look at this all next week and will report back. The challenge as you say will be to see how fast we can get it.

Oh wow and thanks for all the badges & reactions everyone! Awesome to see all the shared excitement 😀