# Quick start

> Run the existing SymbioteNative examples and inspect the first native app driven through the shared engine.

## Scaffold a fresh app

The fastest way to try SymbioteNative in your own project:

```sh
npx @symbiote-native/cli new my-app --framework react
```

`--framework` is one of `react | vue | angular | solid | svelte`. This generates a full app —
native `ios`/`android` folders plus the chosen adapter — and pins `react-native`/`react` at the
app root for you. `@symbiote-native/cli` is beta: `new` scaffolds a complete app; `add` extends
an *existing* SymbioteNative app with optional layers (navigation, splash screen, individual Expo
packages, ...) but doesn't yet wire SymbioteNative into a plain, non-SymbioteNative RN project. See
[`@symbiote-native/cli`](https://github.com/OneEyed1366/symbiote-native/tree/master/packages/cli)
for the full flag reference.

:::note Prefer to read source instead?
The rest of this page runs one of the repository's own examples instead — useful if you'd
rather read/modify a full app in place than scaffold a new one.
:::

## 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:

```sh
pnpm install
```

## Run an example

<Tabs syncKey="framework">
  <TabItem label="React">
    Run the React canary:

    ```sh
    cd examples/react
    pnpm ios
    ```

    For Android:

    ```sh
    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.

  </TabItem>
  <TabItem label="Vue">
    Run the Vue example:

    ```sh
    cd examples/vue-sfc
    pnpm ios
    ```

    or, for the TSX-flavored Vue example:

    ```sh
    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.

  </TabItem>
  <TabItem label="Angular">
    Run the Angular example:

    ```sh
    cd examples/angular
    pnpm ios
    ```

    For Android:

    ```sh
    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).

  </TabItem>
  <TabItem label="Svelte">
    Run the Svelte canary:

    ```sh
    cd examples/svelte
    pnpm ios
    ```

    For Android:

    ```sh
    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.

  </TabItem>
  <TabItem label="Solid">
    Run the Solid canary:

    ```sh
    cd examples/solid
    pnpm ios
    ```

    For Android:

    ```sh
    cd examples/solid
    pnpm android
    ```

    The Solid example proves the engine can be driven through Solid's own
    official non-DOM seam: `@symbiote-native/solid` is a custom renderer built on
    `solid-js/universal`'s `createRenderer`, mapping each renderer operation
    onto the same tiny mutation API every other adapter drives.

  </TabItem>
</Tabs>

## 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](/docs/how-it-works/) to understand the render pipeline.