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.

A Lottie Player which uses ThorVG as a renderer, provides a web component for easily embedding and playing Lottie animations.

• Import from CDN

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

• Install from NPM

npm install @thorvg/lottie-player

Once you import from CDN, you can access <lottie-player/>

<lottie-player 
  autoPlay 
  loop
  mode="normal"
  src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
  style="width: 500px; height: 500px;"
>
</lottie-player>

Import the library and please follow Basic Usage, you can use library on any NPM-based project such as React, Vue and Svelte.

import '@thorvg/lottie-player';

Add declarations.d.ts on the root of project and make sure following declaration.

declare namespace JSX {
  interface IntrinsicElements {
    "lottie-player": any;
  }
}

Then you will be able to use this as same as above

import '@thorvg/lottie-player';

<lottie-player 
  autoPlay 
  loop
  mode="normal"
  src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
  style="width: 500px; height: 500px;"
>
</lottie-player>

We should be careful when using on SSR frameworks such as NextJS, NuxtJS and Svelte, as it means the library must to be rendered on browser/client side.

• NextJS

import { useEffect } from "react";

export default function Home() {
  // ...

  useEffect(() => {
    import("@thorvg/lottie-player");
  });

  // ...
}

• NuxtJS

<template>
  {/* ... */}
</template>

<script>
  export default {
    mounted() {
      import("@thorvg/lottie-player");
    }
  }
</script>

• Svelte

<script>
  import { onMount } from 'svelte';

  onMount(async () => {
    await import('@thorvg/lottie-player');
  });
</script>

ThorVG Lottie Player provides multiple presets optimized for different use cases. Each preset can be selected based on bundle size and performance requirements.

• SW: A CPU-based renderer with full Lottie specification support
• GL: A WebGL accelerated renderer with full Lottie specification support

• SW-Lite: A CPU-based renderer that supports basic Lottie specification (PNG only; Fonts and Expressions are not supported)
• GL-Lite: A WebGL accelerated renderer that supports basic Lottie specification (PNG only; Fonts and Expressions are not supported)

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

<!-- Software Renderer (Standard) -->
<script src="https://unpkg.com/@thorvg/lottie-player@latest/dist/sw/lottie-player.js"></script>

<!-- WebGL Renderer (Standard) -->
<script src="https://unpkg.com/@thorvg/lottie-player@latest/dist/gl/lottie-player.js"></script>

<!-- Software Renderer (Lite) -->
<script src="https://unpkg.com/@thorvg/lottie-player@latest/dist/sw-lite/lottie-player.js"></script>

<!-- WebGL Renderer (Lite) -->
<script src="https://unpkg.com/@thorvg/lottie-player@latest/dist/gl-lite/lottie-player.js"></script>

// Default version
import '@thorvg/lottie-player';

// Software Renderer (Standard)
import '@thorvg/lottie-player/sw';

// WebGL Renderer (Standard)  
import '@thorvg/lottie-player/gl';

// Software Renderer (Lite)
import '@thorvg/lottie-player/sw-lite';

// WebGL Renderer (Lite)
import '@thorvg/lottie-player/gl-lite';

You can adapt the event with the following code example

const player = document.querySelector('lottie-player');

player.addEventListener('load', () => {
  // TODO: implements
});

Method : load(src: string | object)

Purpose : Load and play Lottie animation

Parameters

Return Type : Promise<void>

Method : play()

Purpose : Play loaded animation

Return Type : void

Method : pause()

Purpose : Pause playing animation

Return Type : void

Method : stop()

Purpose : Stop current animation

Return Type : void

Method : seek(frame: number)

Purpose : Move to a given frame

Parameters

Return Type : void

Method : destroy()

Purpose : Destroy animation and lottie-player element

Return Type : void

Method : setLooping(value: boolean)

Purpose : Enable animation loop

Parameters

Return Type : void

Method : setDirection(value: number)

Purpose : Set animation direction

Parameters

Return Type : void

Method : setSpeed(value: number)

Purpose : Set speed of animation

Parameters

Return Type : void

Method : setBgColor(value: string)

Purpose : Set a background color

Parameters

Return Type : void

Method : setQuality(value: number)

Purpose : Set rendering quality for animations

Parameters

Return Type : void

Method : save(target: ExportableType)

Purpose : Export current animation to other file type

Parameters

Return Type : void

Method : getVersion()

Purpose : Return current ThorVG version

Return Type : LibraryVersion

Check the usage of each preset in the example/{framework} directory:

• ThorVG React Example
• ThorVG Vue Example
• ThorVG Svelte Example

Test framework compatibility by running builds across different frontend frameworks:

# From the root directory
$ npm run test:build

This will automatically detect framework projects in the example/ directory and test their build processes.

The build testing script is located in ./build-test/.

Check the usage of each preset in the example/ directory:

• Software Renderer (Standard) - Full Lottie support with CPU rendering
• WebGL Renderer (Standard) - Full Lottie support with WebGL acceleration
• Software Renderer (Lite) - Basic Lottie support with CPU rendering
• WebGL Renderer (Lite) - Basic Lottie support with WebGL acceleration
• WebGPU Renderer - Full Lottie support with WebGPU acceleration