ThorVG for Web

ThorVG.Web is a WebAssembly (WASM)-based extension of the ThorVG vector graphics engine, bringing ThorVG’s rendering capabilities to modern web environments. It provides a lightweight and flexible foundation for rendering vector graphics and Lottie animations directly in the browser, with hardware acceleration through WebGL and WebGPU.

At the core of ThorVG.Web is WebCanvas, a JavaScript/TypeScript API that provides programmatic access to ThorVG’s drawing primitives, scene graph, animation, effects, and vector rendering pipeline. Developers can create, manipulate, and render dynamic graphics while sharing ThorVG’s core rendering architecture, assets, and graphics workflows across native and web platforms.

The following diagram illustrates the architecture of ThorVG.Web, from the web application layer to the underlying rendering backends and web platform.

The WebCanvas API is built on top of lower-level WebAssembly bindings generated using Emscripten, bridging the JavaScript environment with the native ThorVG engine. The engine handles scene composition and rendering through multiple backends, including the CPU software renderer, WebGL, and WebGPU.

On the web platform, the rendered output is presented through an HTML <canvas> element, providing consistent rendering behavior while leveraging the appropriate rendering backend for the target environment.

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

This monorepo contains two complementary packages:

Lottie animation player - Web Components for embedding Lottie animations

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

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

• 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

• 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

• React Example
• Vue Example
• Svelte Example

Back to contents

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

# Install dependencies
pnpm install

# Build all packages
pnpm run build

# Clean build artifacts
pnpm run clean

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