React Bridge

VeloxKit uses a custom React reconciler — not React DOM, not React Native. Your JSX runs through React's standard reconciliation algorithm, but instead of a DOM or a native view hierarchy, it produces VeloxKit's own element tree.

The reconciler

React's reconciler is pluggable. VeloxKit implements the react-reconciler host config, which means it handles:

createInstance — maps <View>, <Text>, etc. to native element structs
commitUpdate — sends prop changes to the Rust side
appendChild / removeChild — mutates the native tree
prepareUpdate — computes a diff before committing

The result is that React's diffing, batching, concurrent mode, suspense, and transitions all work as expected.

JSX to pixels

<View style={{ flex: 1 }}>        ←  your JSX
  <Text>Hello</Text>
</View>

Reconciler converts this to a native element tree (Rust structs)
Layout engine (Taffy / flexbox) computes positions and sizes
Scene builder (Vello) creates GPU draw commands
wgpu submits the commands to the GPU
Display shows the rendered frame

Component types

Type	Example	What it maps to
Host	`<View>`, `<Text>`	Native element — a Rust struct with a type tag
Composite	`function MyComp()`	Pure React — no native counterpart
Canvas	`<Canvas>`	A GPU surface handle
Portal	`<veloxWindow.Portal>`	A secondary OS window

Styling

VeloxKit uses a React Native-compatible style API. Styles are plain JavaScript objects — no CSS, no stylesheets.

<View style={{
  flex: 1,
  flexDirection: 'row',
  alignItems: 'center',
  gap: 12,
  padding: 16,
  background: '#1A1A26',
  borderRadius: 8,
}}>

All layout is flexbox (via Taffy). Absolute positioning is supported. CSS grid is not currently supported.

State, hooks, context

All standard React APIs work:

const [open, setOpen] = useState(false)
const theme = useContext(ThemeContext)
const data = useSuspense(fetchData)

React Query, Jotai, Zustand — any state library that targets React works with VeloxKit.

What doesn't work

React DOM APIs — createPortal from react-dom (use veloxWindow.Portal instead)
CSS-in-JS libraries that generate stylesheets — styled-components, emotion
Browser globals — document, window, localStorage, fetch (use velox.network.fetch instead)
Web components / custom elements

If a library requires DOM APIs, it won't work. Most logic-only libraries (state management, data fetching, utilities) work fine.

Runner Model Capability System