ThorVG for Web

<p align="center"> <img width="800" height="auto" src="https://github.com/thorvg/thorvg.site/blob/main/readme/logo/512/thorvg-banner.png"> </p>

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. <br />

Contents

• Packages
  • Lottie Player
  • WebCanvas
• Examples
  • Lottie Player
  • WebCanvas
  • Framework Integration
• Development
  • Prerequisites
  • Building from Source
  • Building WASM Bindings

📦 Packages

This monorepo contains two complementary packages:

Lottie Player

Lottie animation player - Web Components for embedding Lottie animations

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

---

WebCanvas

ThorVG Canvas for Web – A TypeScript API with a fluent interface for vector graphics rendering

import ThorVG from '@thorvg/webcanvas';

const TVG = await ThorVG.init({ renderer: 'gl' });
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();

Back to contents <br />

Examples

Lottie Player

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

WebCanvas

• 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

• React Example
• Vue Example
• Svelte Example

Back to contents <br />

Development

Prerequisites

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

Building from Source

# Install dependencies
pnpm install

# Build all packages
pnpm run build

# 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_player_setup.sh

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

Back to contents <br />