API overview

Core exports — createVelloRoot, Canvas, Rect, and Text.

This page covers the main public surface from react-vello. Types live in the package; the shapes below match the published TypeScript definitions.

`createVelloRoot`

Mount a React Vello tree on an existing <canvas>.


function createVelloRoot(
  canvas: HTMLCanvasElement,
  options?: RendererOptions
): VelloRoot;

`RendererOptions`

Option	Type	Description
`onReady`	`(context: CanvasContext) => void`	Called when the renderer is ready (GPU or fallback).
`onFrame`	`(ops: Uint8Array) => void`	Encoded frame buffer; valid only for the duration of the call.
`onError`	`(error: unknown) => void`	WebGPU / WASM init failure.

API overview: Core exports —... · React Vello

debug

Method	Description
`render(children)`	Reconcile and draw a React tree.
`unmount()`	Clear the container and stop rendering.
`getContext()`	Access `canvas`, `backend`, `requestFrame`, and `getStats`.


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

const root = createVelloRoot(canvas, {
  onReady: (ctx) => console.log(ctx.backend),
  onError: (error) => console.error(error),
});

root.render(
  <Canvas width={640} height={360}>
    <Rect origin={[0, 0]} size={[100, 100]} fill={{ kind: "solid", color: "#000" }} />
  </Canvas>
);

Prop	Type	Description
`width` / `height`	`number`	Presentation size in CSS pixels.
`autoSize`	`boolean`	Size from the canvas element / container.
`devicePixelRatio`	`number`	Override DPR.
`backgroundColor`	`string \| RgbaColor`	Clear color.
`colorSpace`	`"srgb" \| "display-p3"`	Color space hint.
`antialiasing`	`"fast" \| "msaa" \| "none"`	AA mode.
`onReady` / `onError`	callbacks	Scene-level ready / error hooks.
`children`	`ReactNode`	Scene nodes (`Rect`, `Text`, …).

Prop	Type	Description
`origin`	`[x, y]`	Top-left corner.
`size`	`[width, height]`	Extent.
`width` / `height`	`number`	Alternate size shorthands.
`radius`	`number \| Vec2 \| corners`	Corner radius.
`fill`	`Paint`	Fill paint (`{ kind: "solid", color }`, …).
`stroke`	`Stroke`	Stroke width, paint, join, cap, dash.

Prop	Type	Description
`children` / `text`	`ReactNode` / `string`	Content to draw.
`origin`	`[x, y]`	Baseline origin.
`font`	`TextFont`	`family`, `size`, optional `weight`, `style`, `lineHeight`.
`fill`	`Paint`	Text color / paint.
`maxWidth`	`number`	Wrap width.
`align`	`"start" \| "center" \| "end"`	Horizontal alignment.

API overview

`createVelloRoot`

`RendererOptions`

API overview

`createVelloRoot`

`RendererOptions`

`VelloRoot`

`Canvas`

`Rect`

`Text`

Other host components