A Live2D runtime for the web.

Render Cubism 3/4/5 models with WebGL2. Use it with React or drive expressions and gaze from a camera.

Get started Open playground

Live demoWebGL2 · Cubism 3/4/5

Capabilities

From rendering to tracking.

Runtime

Drawn straight to WebGL2, without PixiJS.

Cubism 3/4/5
Motion & sequences
Expressions
Parameters

Audio & tracking

Driven by a microphone or a webcam.

Volume lip sync
wLipSync
MediaPipe Main / Worker
Perfect Sync

Integrations & tools

Separate entries you add when you need them.

React
Inspector
Devtools
Verified examples

Setup

A quick and simple start.

Works from plain JavaScript or from React.

Read the JavaScript guide →

avatar.ts

import { createLive2D } from 'live2d-web'

const character = await createLive2D({
  container: document.querySelector('#avatar'),
  coreUrl: '/live2dcubismcore.min.js',
  src: '/models/avatar.model3.json',
})

await character.motion('TapBody', 0)
window.addEventListener('pagehide', () => character.dispose(), { once: true })

Avatar.tsx

import { Live2DCanvas, Live2DModel } from 'live2d-web/react'

export function Avatar() {
  return (
    <Live2DCanvas coreUrl="/live2dcubismcore.min.js">
      <Live2DModel src="/models/avatar.model3.json" />
    </Live2DCanvas>
  )
}

Package map

Install by capability.

The core stays small. React, face tracking and development tools live in separate entries.

live2d-web

Core

Cubism 3/4/5 rendering, motion, expressions and parameter control.

live2d-web/react
live2d-web/tracking/mediapipe

Integrations

Optional React components, MediaPipe face tracking and lip-sync inputs.

live2d-web/inspect
live2d-web/devtools

Tools

Model inspection, runtime controls and verified examples for development.