A React renderer powered by Vello, a Rust GPU renderer, via WASM + WebGPU
Draw shapes and text declaratively in React while Rust handles the rendering.
Try the live demo.
npm install react-vello react react-dom<canvas id="vello"></canvas>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>
);- WebGPU is required; use a browser with WebGPU enabled.
- The WASM renderer ships with the package; no extra setup required.
Inspired by react-three-fiber, react-konva, and react-pdf.