Architecture

VeloxKit is four layers working together. From your code to the screen:

Layer 1 — React

Your application is a standard React tree. You write components, hooks, and context exactly as you would for the web. VeloxKit exports its own primitive components (View, Text, Pressable, etc.) instead of DOM elements, but the React model is identical.

// This is just React
function Counter() {
  const [n, setN] = useState(0)
  return (
    <View>
      <Text>{n}</Text>
      <Pressable onPress={() => setN(n + 1)}>
        <Text>+</Text>
      </Pressable>
    </View>
  )
}

Layer 2 — Runtime

VeloxKit runs a purpose-built V8 runtime (not Node.js, not Deno). The runtime:

• Starts from a V8 snapshot — a pre-warmed heap image that eliminates parse/compile time
• Hosts a custom React reconciler that produces a scene graph instead of a DOM
• Bridges JavaScript calls to native Rust bindings via a typed FFI

The reconciler translates React's virtual DOM into VeloxKit's native element tree — a data structure the GPU renderer can consume directly.

Layer 3 — Renderer

The positioned element tree is rasterized by one of three backends, selected automatically based on the hardware (renderMode: 'auto'):

Vello runs on DirectX 12 (Windows), Metal (macOS), and Vulkan (Linux). TinySkia runs on any machine with no GPU requirement.

Every component — a View, a Text, a Canvas — becomes renderer draw calls. There is no intermediate HTML, no CSS layout engine, no DOM. VeloxKit implements its own flexbox layout engine in Rust (Taffy).

Layer 4 — Shell

The shell handles OS integration: native windows, system tray, file dialogs, clipboard, notifications. It wraps the GPU surface and exposes the veloxWindow API to your React code.

Data flow

Your React code
      ↓  reconciler
 Element tree (Rust)
      ↓  layout (Taffy)
 Positioned boxes
      ↓  renderer (TinySkia / FemtoVG / Vello — auto-selected)
 Screen pixels

The entire path from a setState call to a repainted frame takes 1–3ms on modern hardware.

What VeloxKit is NOT

• Not a WebView wrapper — there is no HTML or CSS rendered
• Not a transpiler — your React code runs as-is in V8
• Not Electron — there is no Chromium, no Node.js, no ipcRenderer
• Not a Rust framework — JS-only projects require no Rust at all. Native extension projects (veloxkit-cli create --native) let you write Rust to expose custom bindings, but this is opt-in.