React Vello

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.

Demo

Try the live demo.

Install

npm install react-vello react react-dom

Quickstart

<canvasid="vello"></canvas>

import{Canvas,Rect,Text,createVelloRoot}from"react-vello";constcanvas=document.querySelector("#vello")asHTMLCanvasElement;constroot=createVelloRoot(canvas);root.render(<Canvaswidth={640}height={360}><Rectorigin={[40,40]}size={[200,120]}fill={{kind: "solid",color: "#3b82f6"}}radius={16}/><Textorigin={[60,110]}font={{family: "Space Grotesk",size: 32,weight: 600}}fill={{kind: "solid",color: "#0f172a"}}>
Hello Vello
</Text></Canvas>);

Notes

• 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.

License

MIT

---

Crafted by Matthew Blode