Quick start

Note

SymbioteNative is a renderer project under active development. The quickest way to try it today is to run one of the repository examples instead of starting from a published scaffolder.

Prerequisites

• Node.js >=20
• pnpm 11.x
• A React Native iOS or Android development environment
• Xcode for iOS simulator runs, or Android Studio/SDK for Android runs

Install dependencies

From the repository root:

pnpm install

Run an example

React

Run the React canary:

cd examples/react
pnpm ios

For Android:

cd examples/react
pnpm android

The React example is the reference canary: it drives the SymbioteNative engine through a React reconciler in mutation mode, then the engine commits to Fabric.

Vue

Run the Vue example:

cd examples/vue-sfc
pnpm ios

or, for the TSX-flavored Vue example:

cd examples/vue-tsx
pnpm ios

The Vue examples prove the same native engine can be driven by Vue’s renderer operations rather than React’s host config.

Angular

Run the Angular example:

cd examples/angular
pnpm ios

For Android:

cd examples/angular
pnpm android

The Angular example proves the same native engine driven a third way: a custom Renderer2/RendererFactory2 — Angular’s own framework-agnostic rendering seam — maps Angular’s operations onto the engine mutation API, with a DOM-less bootstrap (no platform-browser, no zone.js).

Svelte

Run the Svelte canary:

cd examples/svelte
pnpm ios

For Android:

cd examples/svelte
pnpm android

The Svelte example proves the engine can be driven with no framework reconciler at all: @symbiote-native/svelte patches globalThis DOM classes so stock compiled Svelte output believes it is talking to the real DOM, and every DOM call it makes routes into the same mutation API every other adapter drives.

What to look for

The visible demo is intentionally small: a native tap-to-increment counter. The important part is the route it takes:

1. Framework state changes.
2. The adapter calls insert, remove, setProp, or commit on the engine.
3. The engine translates mutations into Fabric’s persistent clone-on-write model.
4. React Native Fabric updates real native views.

Next, read how it works to understand the render pipeline.