High-performance vector graphics rendering for the modern web

ThorVG Web provides WebAssembly-powered vector graphics rendering with multiple APIs designed for different use cases. From declarative Lottie animations to imperative canvas drawing, ThorVG delivers native-like performance directly in your browser.

ThorVG is a lightweight, cross-platform vector graphics engine that powers this web implementation. ThorVG Web brings its performance and flexibility to JavaScript/TypeScript through WebAssembly bindings, supporting Software, WebGL, and WebGPU rendering backends.

This monorepo contains two complementary packages:

Declarative Lottie animation player - Web component for embedding Lottie animations

<script src="https://unpkg.com/@thorvg/lottie-player@latest/dist/lottie-player.js"></script>

<lottie-player
  autoPlay
  loop
  src="animation.json"
  style="width: 500px; height: 500px;">
</lottie-player>

→ Read lottie-player documentation

Imperative TypeScript Canvas API - Fluent Interface for vector graphics

import ThorVG from '@thorvg/canvas-kit';

const TVG = await ThorVG.init({ renderer: 'sw' });
const canvas = new TVG.Canvas('#canvas', { width: 800, height: 600 });

const shape = new TVG.Shape();
shape.appendRect(100, 100, 200, 150, { rx: 10, ry: 10 });
shape.fill(255, 0, 0, 255);

canvas.add(shape);
canvas.render();

→ Read canvas-kit documentation

All packages support multiple rendering backends:

Lottie Player Examples:

• Software Renderer - Full Lottie support with CPU rendering
• WebGL Renderer - GPU-accelerated Lottie rendering
• Software Lite - Lightweight CPU rendering
• WebGL Lite - Lightweight GPU rendering
• WebGPU Renderer - Next-gen GPU acceleration

Canvas Kit Examples:

• Basic Usage - Getting started with shapes
• Animation - Frame-based animations
• Scene Composition - Hierarchical object grouping
• Picture Loading - SVG and image rendering
• Text Rendering - Typography and fonts
• Live Editor - Interactive code playground

See framework-specific examples:

• React Example
• Vue Example
• Svelte Example

→ Read monorepo documentation

• Node.js 18+
• pnpm 8+
• Emscripten SDK (for WASM builds)
• Meson & Ninja (for native builds)

# Install dependencies
pnpm install

# Build all packages
pnpm run build

# Run linter
pnpm run lint

# Clean build artifacts
pnpm run clean

Each package has its own WASM build script:

# Build lottie-player WASM
cd packages/lottie-player
sh ./wasm_setup.sh

# Build canvas-kit WASM
cd packages/canvas-kit
sh ./wasm_setup.sh

Test compatibility across different frameworks:

pnpm run test:build

• Getting Started

  • Lottie Player Guide
  • Canvas Kit Guide

• API Reference

  • Lottie Player API
  • Canvas Kit API Reference

• Examples & Integration

  • Framework Integration Examples
  • Live Interactive Examples