live2d-web documentation

Live2D Devtools

Mount optional, framework-free controls for a loaded model.

Mount the optional panel

Import Devtools only where you need it. The subpath has no React dependency and does not change the root bundle.

devtools.ts

import { mountLive2DDevtools } from 'live2d-web/devtools'
 
const devtools = mountLive2DDevtools({
  container: document.querySelector('#devtools')!,
  target: live2d,
})
 
devtools.setTab('parameters')
// Later, remove only the UI and parameter drivers owned by this panel.
devtools.dispose()

What it can control

Overview shows public model and runtime information and copies a diagnostic JSON file without model URLs or camera data.
Parameters searches current values and creates temporary slider overrides.
Motion plays one motion or a small sequence with priority and fade options.
Expression applies, fades and clears expressions.

The caller owns the container's size, position and scrolling. Devtools adds one host with an open Shadow DOM and never removes existing children. Microphones, MediaPipe and Workers remain application responsibilities.

Switch targets without leaking overrides

Call setTarget() when the inspected model changes. Devtools removes only parameter drivers that it created, leaving application-owned drivers intact. Parameter sampling runs only while the Parameters tab is visible and stops on target replacement or dispose.

Keep Devtools development-only when appropriate

The entry is optional and does not enter the root graph unless imported. Applications can dynamically import it behind a development flag, mount it into a fixed panel and dispose it when the panel closes. Do not use the diagnostic JSON as a model export: it intentionally omits model URLs, assets, camera data and face landmarks.