Core runtime
Cubism 4/5 · WebGL2 · motion · expression
Cubism 4/5 · WebGL2 · JavaScript + React
Live2D in the browser. No PixiJS required.
A WebGL2 runtime for Cubism models with optional React, face tracking, lip sync and development tools.
npm install live2d-webMotion
Lip syncSimulates mouth movement without using a microphone.
Optional integrations
React · MediaPipe · wLipSync
Tooling
Model inspection · Devtools · verified examples
Optional entry · live2d-web/react
React stays optional.
The root entry has no React dependency. Import live2d-web/react only from the client component that owns the model.
React guide →Avatar.tsx
import { Live2DCanvas, Live2DModel } from 'live2d-web/react'
export function Avatar() {
return (
<Live2DCanvas coreUrl="/live2dcubismcore.min.js">
<Live2DModel src="/models/avatar.model3.json" followPointer />
</Live2DCanvas>
)
}
Bring your own licensed Cubism Core and model assets.