CSS On The ESP32

There are lots of graphics libraries available for the ESP32, and lots of ways to program one to boot. Even still, most of us wouldn’t immediately think to CSS when it comes to embedded products — yet that’s now a thing on the Espressif platform, apparently.

The Gea stack allows one to compose CSS and TypeScript code that is then turned into generated C++ code that compiles to native firmware. The team behind Gea have demoed this ability by running a 3D cube animation on an ESP32 at up to 60 FPS. This isn’t some ugly, low-res wireframe demo, either. It’s a full-color animation running on a 410×502 AMOLED screen. It’s very fluid, and can even handle transparency on the cube faces (albeit with a performance penalty).

It’s worth noting that this isn’t a full browser engine. As you might expect, some concessions had to be made to get it running on the ESP32. Namely, it doesn’t handle “:hover” states because it’s designed for touchscreen use, fonts are rasterized, and the UI tree is limited to just 512 nodes. Regardless, it shows that using CSS and TypeScript to develop for the ESP32 is entirely possible without some crazy loss of performance. If you want to build easy interfaces on an ESP32 while leaning on web dev experience, this could be very useful indeed.

There are lots of fun ways to write code for the ESP32; you can even try MicroPython if you like.

One thought on “CSS On The ESP32

  1. Is this an open source project or is it commercial? There is very little info in neither the video nor the website. It seems to be in an “early startup” state.

    One project that has been in the back of my mind is a microcontroller that can render (a subset of) standard HTML. Goal is that a small SBC is configured as a server, and a power efficient handheld device pulls pages from the server and displays them on a touch screen to create a customizable remote control, sort of like the old Philips Pronto.

    The device does does not have to be capable to be a full web browser, but it must understand standard HTML well enough to render at least one picture type, and send button presses back to the “server”.

    This server is then part of an home automation system, and it may have extra modules to create RF or IR commands to control external equipment.

    Wifi is a bit power hungry, maybe it’s possible to use bluetooth as the underlying protocol. Linux can also work with http over USB.

Leave a Reply

Please be kind and respectful to help make the comments section excellent. (Comment Policy)

This site uses Akismet to reduce spam. Learn how your comment data is processed.