Installation
Install react-thorvg-fiber using your preferred package manager:
npm install react-thorvg-fiber
Requirements
React ThorVG Fiber requires the following peer dependencies:
- React:
^19.0.0
- React DOM:
^19.0.0
React ThorVG Fiber is built for React 19. Make sure your project uses React 19 or later.
Browser Support
React ThorVG Fiber requires:
- WebAssembly: All modern browsers (Chrome, Firefox, Safari, Edge)
- WebGL: Required only for
GlCanvas (hardware-accelerated rendering)
- Canvas 2D: Required for
SwCanvas (software rendering)
Most modern browsers support these features. For older browsers, consider using a fallback or polyfill.
TypeScript Support
React ThorVG Fiber is written in TypeScript and includes comprehensive type definitions. No additional @types packages are needed.
import type { SwCanvasProps, ShapeProps, CircleProps } from 'react-thorvg-fiber';
Package Contents
When you install react-thorvg-fiber, you get:
- Main library: React components and hooks
- WebAssembly modules:
thorvg-sw.wasm - Software rendering enginethorvg-gl.wasm - WebGL rendering engine
- TypeScript definitions: Complete type definitions for all APIs
Module Exports
The package provides the following exports:
import {
// Canvas components
SwCanvas, // Software rendering canvas
GlCanvas, // WebGL rendering canvas
// Shape components
Shape, // Base shape with fill/stroke
Scene, // Container for grouping shapes
// Geometry components
Rect, // Rectangle/rounded rectangle
Circle, // Circle/ellipse
Path, // Custom path with commands
// Constants
PathCommand, // Path command types (MoveTo, LineTo, etc.)
FillRule, // Fill rules (Winding, EvenOdd)
StrokeCap, // Stroke cap styles (Butt, Round, Square)
StrokeJoin, // Stroke join styles (Miter, Round, Bevel)
// Types
type SwCanvasProps,
type GlCanvasProps,
type ShapeProps,
type SceneProps,
type RectProps,
type CircleProps,
type PathProps,
type Color,
type TransformProps,
type Point,
} from 'react-thorvg-fiber';
WebAssembly File Setup
The WebAssembly files need to be accessible to your application. The setup depends on your bundler:
Vite
With Vite, you can import WASM files directly:
import { SwCanvas } from 'react-thorvg-fiber';
// @ts-expect-error - WASM import
import wasmUrl from 'react-thorvg-fiber/thorvg-sw.wasm';
function App() {
const locateFile = () => wasmUrl;
return (
<SwCanvas width={400} height={400} locateFile={locateFile}>
{/* your shapes */}
</SwCanvas>
);
}
The @ts-expect-error comment is needed because TypeScript doesn’t recognize .wasm imports by default.
Webpack
For Webpack, you may need to configure WASM loading:
// webpack.config.js
module.exports = {
experiments: {
asyncWebAssembly: true,
},
module: {
rules: [
{
test: /\.wasm$/,
type: 'asset/resource',
},
],
},
};
Next.js
For Next.js, add WASM support to your config:
// next.config.js
module.exports = {
webpack: (config) => {
config.experiments = {
...config.experiments,
asyncWebAssembly: true,
};
config.module.rules.push({
test: /\.wasm$/,
type: 'asset/resource',
});
return config;
},
};
React ThorVG Fiber uses client-side features (Canvas, WebGL). In Next.js, use "use client" directive in components that use the library.
CDN Usage
If you’re using a CDN or custom asset path, use the locateFile prop to specify where to load the WASM files:
function App() {
const locateFile = (path: string) => {
return `https://your-cdn.com/wasm/${path}`;
};
return (
<SwCanvas width={400} height={400} locateFile={locateFile}>
{/* your shapes */}
</SwCanvas>
);
}
Verify Installation
Create a simple test to verify everything is working:
import { SwCanvas, Shape, Circle } from 'react-thorvg-fiber';
function Test() {
return (
<SwCanvas width={100} height={100}>
<Shape fill={[255, 0, 0, 255]}>
<Circle x={50} y={50} radius={25} />
</Shape>
</SwCanvas>
);
}
Next Steps
Quick Start Guide
Build your first vector graphic with step-by-step instructions