GitHub - mblode/react-vello: Blazing fast React renderer powered by 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.

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