React ThorVG Fiber — Karthikeyan Ranasthala

React renderer for ThorVG vector graphics via WebAssembly with software and WebGL2 backends.

In late 2023, while working on Lottie Creator, our team moved its renderer from Three.js to ThorVG. ThorVG was created by Hermet Park, who joined LottieFiles to continue its development. The team needed an internal WASM and JavaScript bridge for the engine, which prompted this project: a declarative React renderer backed by custom ThorVG bindings.

React ThorVG Fiber rendering one thousand animated rectangles beside its React source

Usage

import { SwCanvas, Shape, Rect, Circle } from "react-thorvg-fiber";

export function App() {
  return (
    <SwCanvas width={500} height={500}>
      <Shape fill={[59, 130, 246, 255]} x={50} y={50} rotation={45}>
        <Rect x={-25} y={-25} width={50} height={50} />
      </Shape>
      <Shape fill={[234, 88, 12, 255]}>
        <Circle x={200} y={200} radius={40} />
      </Shape>
    </SwCanvas>
  );
}

Shape owns styling and transforms. Rect, Circle, and Path are geometry commands, so they must be nested inside a Shape; they are not standalone drawable elements. A circle’s center and size use x, y, and radius.

Rendering Backends

SwCanvas runs ThorVG’s software renderer in WebAssembly, then writes its pixel buffer to a regular HTML canvas. It is the compatibility-first option. GlCanvas uses ThorVG’s WebGL2 backend for a GPU rendering path. It requires a unique id, because the current WebGL integration binds its context to the canvas through that identifier.

The bindings expose ThorVG’s WASM API to TypeScript, while a custom React renderer turns React components into ThorVG scenes and paints. The software and WebGL2 paths ship as separate WASM artifacts, so an application only needs the engine it chooses.

React ThorVG Fiber software and WebGL renderers displaying the same retained scene

Tradeoff

React can update, reorder, or remove children independently. ThorVG Shapes accumulate geometry commands but cannot remove one command at a time. When a Shape’s geometry changes, the renderer resets that Shape and reapplies its current geometry in order. That keeps the React tree natural, at the cost of rebuilding the changed Shape’s geometry instead of incrementally editing a single command.

Current Demo

The live documentation includes interactive examples for shapes, scenes, transforms, paths, fills, and strokes. Its current home demo draws and continuously rotates 1,000 colored rectangles with both the software and WebGL2 renderers.

Scope

The renderer is a focused graphics package, not a complete canvas or accessibility framework. It does not yet expose text, pictures, gradients, Lottie playback, pointer events, hit testing, or accessibility semantics. The package is available on npm.