> ## Documentation Index
> [HTML page](https://blode.co/react-vello/docs/quickstart)
> [Documentation index](https://blode.co/react-vello/docs/llms.txt)
> Use the index to discover all available pages before exploring further.

# Quickstart

Mount a Vello scene on a canvas in a few lines of React.

Create an HTML canvas, mount a Vello root, and render a scene.

## HTML

```html
<canvas id="vello"></canvas>
```

## React

```tsx
import { Canvas, Rect, Text, createVelloRoot } from "react-vello";

const canvas = document.querySelector("#vello") as HTMLCanvasElement;
const root = createVelloRoot(canvas);

root.render(
  <Canvas width={640} height={360}>
    <Rect
      origin={[40, 40]}
      size={[200, 120]}
      fill={{ kind: "solid", color: "#3b82f6" }}
      radius={16}
    />
    <Text
      origin={[60, 110]}
      font={{ family: "Space Grotesk", size: 32, weight: 600 }}
      fill={{ kind: "solid", color: "#0f172a" }}
    >
      Hello Vello
    </Text>
  </Canvas>
);
```

## Updating the scene

Call `root.render(...)` again with a new tree whenever props or children change. Use `root.unmount()` to tear down the reconciler and stop rendering.

## Next

- [WebGPU notes](/docs/webgpu) — browser support and fallbacks
- [API overview](/docs/api/overview) — `Canvas`, `Rect`, `Text`, and `createVelloRoot`