thorvg.web

KO | EN

gitlite — search

#react #python #javascript #docker #webpack #theme #webgl #hacktoberfest #electron #android #plugin #universal

★ 47 Open GitHub ↗

ThorVG web integration for Lottie players and WebCanvas using WebGL and WebGPU

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

[![CodeFactor](https://www.codefactor.io/repository/github/thorvg/thorvg.web/badge)](https://www.codefactor.io/repository/github/thorvg/thorvg.web)
[![Socket Badge](https://badge.socket.dev/npm/package/@thorvg/webcanvas)](https://badge.socket.dev/npm/package/@thorvg/webcanvas)
[![License](https://img.shields.io/badge/licence-MIT-green.svg?style=flat)](https://raw.githubusercontent.com/thorvg/thorvg.web/main/LICENSE)
[![Wikipedia](https://img.shields.io/badge/Wikipedia-000000?style=flat&logo=wikipedia&logoColor=white)](https://en.wikipedia.org/wiki/Thor_Vector_Graphics)
[![Discord](https://img.shields.io/badge/Community-5865f2?style=flat&logo=discord&logoColor=white)](https://discord.gg/n25xj6J6HM)
[![OpenCollective](https://img.shields.io/badge/OpenCollective-84B5FC?style=flat&logo=opencollective&logoColor=white)](https://opencollective.com/thorvg)
 
[![WebCanvas](https://github.com/thorvg/thorvg.web/actions/workflows/build-wcanvas.yml/badge.svg)](https://github.com/thorvg/thorvg.web/actions/workflows/build-wcanvas.yml)
[![Lottie Player](https://github.com/thorvg/thorvg.web/actions/workflows/build-player.yml/badge.svg)](https://github.com/thorvg/thorvg.web/actions/workflows/build-player.yml)

# 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**.

## Contents
- [Packages](#-packages)
  - [Lottie Player](#lottie-player)
  - [WebCanvas](#webcanvas)
- [Examples](#examples)
  - [Lottie Player](#lottie-player)
  - [WebCanvas](#webcanvas)
  - [Framework Integration](#framework-integration)
- [Development](#development)
  - [Prerequisites](#prerequisites)
  - [Building from Source](#building-from-source)
  - [Building WASM Bindings](#building-wasm-bindings)

## 📦 Packages

This monorepo contains two complementary packages:

### [Lottie Player](./packages/lottie-player)
[![npm](https://img.shields.io/npm/v/@thorvg/lottie-player)](https://www.npmjs.com/package/@thorvg/lottie-player)

**Lottie animation player** - [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) for embedding Lottie animations

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

---

### [WebCanvas](./packages/webcanvas)
[![npm](https://img.shields.io/npm/v/@thorvg/webcanvas)](https://www.npmjs.com/package/@thorvg/webcanvas)

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

```typescript
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](#contents)

## Examples

### Lottie Player
- [Software Renderer](./examples/software.html) - Full Lottie support with CPU rendering
- [WebGL Renderer](./examples/webgl.html) - GPU-accelerated Lottie rendering
- [WebGPU Renderer](./examples/webgpu.html) - Next-gen GPU acceleration
- [Software Lite](./examples/software-lite.html) - Lightweight CPU rendering
- [WebGL Lite](./examples/webgl-lite.html) - Lightweight GPU rendering
- [WebGPU Lite](./examples/webgpu-lite.html) - Lightweight WebGPU rendering

### WebCanvas
- [Basic Usage](./examples/basic-usage.html) - Getting started with shapes
- [Animation](./examples/animation-example.html) - Frame-based animations
- [Scene Composition](./examples/scene.html) - Hierarchical object grouping
- [Picture Loading](./examples/picture-example.html) - SVG and image rendering
- [Text Rendering](./examples/text-example.html) - Typography and fonts
- [Live Editor](./examples/live-editor.html) - Interactive code playground

### Framework Integration
- [React Example](./examples/react/)
- [Vue Example](./examples/vue/)
- [Svelte Example](./examples/svelte/)

[Back to contents](#contents)

## Development

### Prerequisites

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

### Building from Source

```bash
# 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:

```bash
# 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](#contents)

thorvg.web

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README