ThorVG for Web

ThorVG.Web is a WebAssembly (WASM)-based extension of the ThorVG vector graphics engine, designed to run seamlessly in modern web environments. It enables efficient and high-performance rendering of vector graphics and Lottie animations directly in the browser, leveraging both WebGL and WebGPU for hardware-accelerated rendering. Fully compatible with ThorVG’s core rendering logic, ThorVG.Web ensures consistent output across desktop, mobile, and web platforms, allowing developers to reuse the same vector assets and rendering code across multiple targets with minimal changes.

Whether you're building a high-performance Lottie animation, a graphics editing tool, or a scalable UI framework for the browser, ThorVG.Web provides the speed and flexibility needed to deliver modern vector graphics experiences on the web.

What is ThorVG?

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.

📦 Packages

This monorepo contains two complementary packages:

@thorvg/lottie-player

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

---

@thorvg/webcanvas

Imperative TypeScript Canvas API - Fluent Interface for vector graphics

import ThorVG from '@thorvg/webcanvas';

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 webcanvas documentation

Rendering Backends

All packages support multiple rendering backends:

Backend	Description
Software (sw)	CPU-based rendering
WebGL (gl)	GPU-accelerated
WebGPU (wg)	WebGPU API

Examples

Basic Examples

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

WebCanvas 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

Framework Integration

See framework-specific examples:

• React Example
• Vue Example
• Svelte Example

Monorepo Structure

→ Read monorepo documentation

Development

Prerequisites

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

Building from Source

# Install dependencies
pnpm install

# Build all packages
pnpm run build

# Run linter
pnpm run lint

# Clean build artifacts
pnpm run clean

Building WASM Bindings

Each package has its own WASM build script:

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

# Build webcanvas WASM
cd packages/webcanvas
sh ./wasm_setup.sh

Testing Framework Integration

Test compatibility across different frameworks:

pnpm run test:build

Documentation

• Getting Started

  • Lottie Player Guide
  • WebCanvas Guide

• API Reference

  • Lottie Player API
  • WebCanvas API Reference

• Examples & Integration

  • Framework Integration Examples
  • Live Interactive Examples