What is Kog?
Kog is a language and framework for building user interfaces on microcontrollers — ESP32-class devices with touch displays — using the React you already know.
import { useState } from 'react';
import { View, Text, Pressable, StyleSheet } from '@kog/ui';
export function Counter() {
const [count, setCount] = useState(0);
return (
<View style={styles.row}>
<Text style={styles.label}>{count}</Text>
<Pressable onPress={() => setCount(count + 1)}>
<Text>+1</Text>
</Pressable>
</View>
);
}
const styles = StyleSheet.create({
row: { flexDirection: 'row', gap: 8, alignItems: 'center' },
label: { color: '#222', fontSize: 16 },
});
That component runs on a $10 board, rendered by LVGL — the industry-standard embedded graphics library — with sub-second hot reload while you develop and over-the-air updates when you ship.
Looks like React, runs like Svelte
Kog keeps React's surface: TSX, hooks, StyleSheet.create, components named View, Text, Pressable, FlatList. But there is no virtual DOM and no reconciler on the device. The Kog compiler rewrites your components at build time so that:
- each component's body runs once, when it mounts;
- every dynamic expression in your JSX becomes a tiny effect subscribed to exactly the state it reads;
- updating state runs only those effects, each of which calls one native LVGL setter.
LVGL widgets are retained objects — they keep their own state — so this maps perfectly: no tree diffing, no re-renders, no garbage-collection churn during animation. The result fits comfortably where React itself never could. See Thinking in Kog for the handful of places the behavior differs from React (they're improvements, mostly).
The toolchain is just npm
You never install ESP-IDF, CMake, a C compiler, or Python. The native runtime (LVGL + a tiny JS engine + the Kog host layer) ships as prebuilt firmware images that the CLI downloads and flashes over pure Node serial. Your app compiles to compact bytecode that pushes to the device in under a second — over USB or Wi-Fi.
No hardware yet? The simulator is the same runtime compiled for your desktop. Everything — hot reload, the component library, even GPIO via virtual pins — works identically.
Where to next
- Installation — Node 20+, one
npm create - Your first app — the template, explained
- Thinking in Kog — what's different from React and why
- Architecture — how the whole thing works under the hood
:::note Project status Kog is under active initial development. These docs describe the v1 surface; pages for features still landing are marked accordingly. :::