Skip to main content

Open source · Apache-2.0 · Beta

embeddedReact

React Native for embedded MCUs.

Write React, flash it, and the UI runs on the chip. No browser, no phone, no operating system.

Get startedTry it in the browser
npm create embedded-react@latest my-app
App.jsx
import {useState} from 'react';
import {View, Text, Pressable} from 'embedded-react';


export function App() {
  const [taps, setTaps] = useState(0);
  return (
    <View style={{flex: 1, padding: 20, backgroundColor: '#1a1a2e'}}>
      <Text style={{color: '#fff', fontSize: 24}}>
        Hello from an ESP32.
      </Text>
      <Pressable onPress={() => setTaps(taps + 1)}>
        <Text style={{color: '#e94560', marginTop: 12}}>
          Tapped {taps} times
        </Text>
      </Pressable>
    </View>
  );
}

Hello from an ESP32.

Tapped 0 times

running on the chip

Why Embedded React

Not React talking to a microcontroller. React on the microcontroller.

The React you already know

JSX, hooks, the Animated API and flexbox styles, exactly as you would write them for iOS or Android.

A pure C99 engine

Scene graph, Yoga-compatible flexbox layout, anti-aliased shapes, shadows, transforms and gradients, drawn straight into a framebuffer or SPI display.

One app, two flows

Run a real React reconciler on QuickJS, or compile the same JSX ahead of time to a package. It is a build flag, not a rewrite.

Fits chips with no external RAM

The ahead-of-time flow leaves no JavaScript engine and no garbage collector on the device, so small MCUs are in reach.

Hot reload, no hardware

The engine also compiles to WebAssembly. Develop in the browser with a device frame, then flash the same app.

Native animation and touch

Animations, multitouch hit-testing, scroll momentum and dial widgets run inside the engine, not in JavaScript.

Two ways to ship

The same app, resolved at runtime or at compile time.

Flow A · runtime

React on QuickJS

  1. JSX
  2. esbuild bundle
  3. QuickJS bytecode
  4. React reconciler on the chip
  5. C engine

Full runtime dynamism: live state, anything JavaScript can express, and hot reload. Wants external RAM for the JavaScript heap: PSRAM on an ESP32-S3, or SDRAM on an STM32H7.

Flow B · ahead of time

JSX compiled to a package

  1. JSX
  2. AOT compiler
  3. Verified package
  4. Flow B runtime on the chip
  5. C engine

State, handlers and animations are resolved at build time into a package a small runtime verifies and runs. Smaller, deterministic, and at home on MCUs with only internal RAM.

How the two flows compare →

Hardware

From a 7-inch RGB panel down to a watch-sized SPI display.

ESP32-S3800×480 RGB panel · Flow AESP32 “CYD”No PSRAM · SPI display · Flow BRP2040240×280 SPI display · Flow BSTM32H7SDRAM · Chrom-ART backend · Flow ADesktopLinux, macOS, Windows · SDLRaspberry PiPlanned

Write React. Flash it.

npm create embedded-react@latest my-app
Get startedView on GitHub