Skip to main content

​
React ThorVG Fiber

A React renderer for ThorVG, enabling declarative 2D vector graphics with high-performance rendering powered by WebAssembly. This gives you the full performance of ThorVG in the browser, with the developer experience of React.

​
What is React ThorVG Fiber?

React ThorVG Fiber brings the power of ThorVG’s C++ vector graphics engine to React through WebAssembly. It provides a declarative API that feels natural to React developers while delivering native-level performance for 2D graphics rendering.

Installation

Get started with npm, yarn, pnpm, or bun

Quick Start

Build your first vector graphic in minutes

API Reference

Explore the complete API documentation

Examples

Learn from interactive examples

​
Key Features

Native Performance

ThorVG C++ library compiled to WebAssembly with custom JavaScript bindings for direct access to the powerful vector graphics engine

Declarative API

Build complex vector graphics using familiar React patterns with components, props, and hooks

Multiple Backends

Choose between software rendering (Canvas 2D) or hardware-accelerated rendering (WebGL) based on your needs

TypeScript Support

Fully typed API with comprehensive TypeScript definitions for a great developer experience

Tree-Shakeable

Import only what you need - modern ESM build with optimized bundle size

Production Ready

Battle-tested renderer built on React Reconciler with comprehensive test coverage

​
Architecture

React ThorVG Fiber consists of two main layers:
  1. Native ThorVG Bindings: The ThorVG C++ library compiled to WebAssembly with custom JavaScript bindings, providing direct access to ThorVG’s vector graphics engine
  2. React Renderer: A declarative React API built on React Reconciler that wraps the bindings, enabling you to build vector graphics with familiar React components
This architecture gives you the performance of native C++ code with the developer experience of React.

​
Simple Example

Here’s a quick taste of what React ThorVG Fiber looks like: 
import { SwCanvas, Shape, Circle } from 'react-thorvg-fiber';

function App() {
  return (
    <SwCanvas width={400} height={400}>
      <Shape fill={[59, 130, 246, 255]}>
        <Circle x={200} y={200} radius={100} />
      </Shape>
    </SwCanvas>
  );
}
This renders a blue circle in the center of a 400x400 canvas using software rendering.

​
When to Use React ThorVG Fiber

React ThorVG Fiber is ideal for:
  • Data Visualizations: Charts, graphs, and interactive data displays
  • Animations: Smooth, performant vector animations
  • Interactive Graphics: Games, drawing tools, and creative applications
  • SVG-like Graphics: When you need programmatic control over vector graphics
  • High-Performance Rendering: Complex scenes that benefit from WebAssembly performance
React ThorVG Fiber requires WebAssembly support. Ensure your target browsers support WebAssembly and WebGL (for GlCanvas).

​
Next Steps

Install the Package

Install react-thorvg-fiber in your project

Build Your First Graphic

Follow the quick start guide to create your first vector graphic

Build docs developers (and LLMs) love

Get started for freeTalk to us