React Vello: a React renderer that draws on the GPU through Vello and WebGPU

The curve above

A cubic Bézier with four draggable handles. Drag one. The thin lines show each control point’s pull. The dot is de Casteljau’s algorithm at a moving t, so it slows through tight bends.

Install

The WASM renderer ships inside the package. No build step, no asset to host.

Quickstart

Four components and a root. A complete program that draws a blue box and some text:

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>
);

createVelloRoot is createRoot for a canvas. Everything after it is ordinary React: state, effects, keys, refs.

How it works

Every 2D canvas library before this one worked shape by shape: one rectangle, then another, and the picture cost what it held. Vello encodes the whole scene into buffers and rasterises it with compute shaders that never see separate draws. Shape count stops being the thing that costs, which is why the comparison runs thirty thousand of them at once.

Your side stays Canvas, Group, Path and Rect with props. A reconciler turns the tree into a scene graph, Rust encodes a binary frame, Vello rasterises it. Dragging a handle above is an onPointerDown on a shape, not a coordinate you hit-tested.

Requirements

WebGPU. Without it the renderer falls back to Canvas 2D and says so on screen, so the page still draws.

Benchmarks

Thirty thousand animated shapes, three renderers, your machine: compare react-vello, react-konva and react-dom.