React is not just for the Web: Running React on an ESP32 Microcontroller

A common misconception is that React is a library for building websites. While that’s one of its primary use cases, React itself is actually web agnostic.

At its core, React consists of two parts: a reconciler that figures out what changed in your component tree, and a renderer that applies those changes to a target environment. On the web, react-dom updates the browser DOM. But React can also target terminals with Ink, native mobile apps with React Native, 3D scenes with React Three Fiber, PDFs, canvases, and much more.

In this session, we’ll explore what it takes to build a custom React renderer from scratch by taking React somewhere it definitely wasn’t designed to run: an ESP32 microcontroller with just 520 KB of RAM and a tiny OLED display.

We’ll begin by understanding how React works under the hood and why it can run outside the browser. Then we’ll dive into the hardware itself, looking at how OLED displays are typically programmed using conventional C++ libraries and what challenges arise when you’re working with only 520 KB of RAM and 4 MB of flash storage.

From there, we’ll introduce Preact, a lightweight React-compatible alternative, and Moddable XS, a JavaScript engine designed for embedded systems. Using these tools, we’ll progressively build a React-powered UI running directly on the microcontroller.

We’ll start with a simple “Hello World” application, then build an interactive counter controlled by physical hardware buttons, demonstrating how familiar React concepts such as components, state, and re-rendering can be applied to embedded devices. Finally, we’ll showcase a more complex interactive interface running entirely on the OLED display to demonstrate what’s possible when React’s component model is brought to hardware.

Along the way, we’ll discuss the memory tradeoffs involved in running a JavaScript runtime on a microcontroller and examine where that memory goes. You’ll also get an inside look at the renderer itself, seeing how React components are transformed into drawing operations, how state updates trigger screen updates, and how a completely custom rendering target can be integrated into React’s architecture.

And finally, we’ll answer an important question: just because you can run React on a microcontroller, does that mean you should?

1. Learn more about React Architecture:  Changing people’s perception that React is just for the web. The diffing engine is genuinely host-agnostic and the DOM is just one swappable target. You can swap react-dom with react-ink, react-native, react-null and react-three-fiber and reimplement the core methods that react-dom implements, to paint pixels in an OLED.

2. How to build a custom renderer for any target, using a minimal in-memory "DOM" whose node mutations are the host operations.

3. Is it worth running React on an ESP32 and do we even get any performance benefits running react on a small chip?