kuito.
Get started

How Kuito works

Follow an app from TypeScript source to a native screen. These pages explain implementation choices for contributors and help app authors diagnose behavior that spans the compiler and runtime.

Compilation and state

Compiler and runtime design explains ownership across the compiler, bindings, runtime and native host. Live Patch explains which edits retain state and which reset a component.

01 / THE ARCHITECTURE From TypeScript to real native views Current on-device development path. Production native AOT remains a separate experiment. SOURCEApp.tsx Components + signalsnpm dependenciesNative .css / styles BUILD TIMEOxc + Rolldown Transform TSXBundle npm / appExtract native styles DEVICE RUNTIMEHermes worker Reactive stateJSI native hostC++ mutation queue MAIN THREADNative UI UIKit · iOSAndroid ViewsPlatform layout / input No React reconciler. No legacy serialized bridge. UI commits still cross platform-native boundaries.

Threads and frames

Scheduling follows an event through a JavaScript job, a typed mutation batch and a frame commit. Hermes embedding covers runtime ownership and source versus bytecode.

02 / SCHEDULING & RENDERING One app, two execution threads The shared C++ queue batches property mutations before handing them to the native UI thread. HERMES THREADApp logic + async Signals · effects · eventsPromise jobs · timers · fetch One serialized VM owner C++ queue Deduplicateproperties Keep create /remove order NATIVE UI THREADPlatform renderer UIKit / Android ViewsApply ordered mutation batch Layout · animations · touch input Native events queue back to Hermes

Native views

The renderer maps plans to UIKit and Android Views. Flattening removes native objects from layout-only wrappers. Native modules add capabilities and custom views.

05 / NATIVE RENDERER The same view operations on both platforms The kernel numbers views and commits a plan; each renderer keeps one record per view and the same tables, keyed by prop name. KERNEL plan → reconcile → commit A label names one native object Numbers inside, labels at the edge Decides flattening and diffs props HOST BATCH One call per job Create · Remove · Move · Flatten Prop · Command · UI · UIScript Typed records, strings by index RENDERER UIKit · iOS / Android Views View tree: create, move, remove (with exiting), clear View factory: a kind → a native view, module views too Property tables: animation · layout · decoration · text · controls Commands: focus · blur · keyboard.dismiss · accessibility.announce One record per view view (nil while flattened) · content · layout node gestures · exiting · composed style state Events go back the same way The emitter writes one wire format; a parity test fails until each platform has every setter the manifest marks. Every renderer error is the same four cases on both platforms.

Apply this knowledge

For a slow interaction, start with performance. For a gesture that falls back to JavaScript, read placement. For ordinary app work, start with your first app.