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.