tiao

A themeable, draggable debug pane with a vanilla TypeScript API, React hooks, performance and export panes, and optional input plugins.

Built on ideas and code from tweakpane by cocopon, leva by pmndrs, and baku89.

npm install @nightmarket/tiao

import { mountPane } from '@nightmarket/tiao'

const dispose = mountPane({ title: 'Debug' }, (pane) => {
  pane.addBinding(params, 'speed', { min: 0, max: 4 })
})

Everything ships in one package with tree-shakeable subpath exports:

• @nightmarket/tiao — production-safe lazy pane mounting
• @nightmarket/tiao/core — eager pane API for production-visible tooling
• @nightmarket/tiao/react — React hooks
• @nightmarket/tiao/perf-pane — performance monitors
• @nightmarket/tiao/export-pane — PNG, WebM, and MP4 export
• @nightmarket/tiao/plugin-fps
• @nightmarket/tiao/plugin-bezier
• @nightmarket/tiao/plugin-radio-grid
• @nightmarket/tiao/plugin-media
• @nightmarket/tiao/plugin-camera
• @nightmarket/tiao/styles.css — optional static stylesheet

The package is ESM-only.

React is an optional peer dependency and is only required for @nightmarket/tiao/react. The core injects its styles automatically; importing @nightmarket/tiao/styles.css disables that runtime injection.

useControls and mountPane work without application-level environment checks. Gating resolves from one canonical env variable, DEBUG_LEVEL, read through your bundler's client-exposure prefix (NEXT_PUBLIC_DEBUG_LEVEL in Next.js, VITE_DEBUG_LEVEL in Vite, bare DEBUG_LEVEL for Node or a custom define): 0 disables everything, 1 arms a runtime ?debug URL toggle that lazy-loads the pane, and 2 enables by default (?debug=false turns it off). Unset falls back to NODE_ENV — pane in development, no-op in production. Production builds resolve through the production export condition, which Vite applies on its own; esbuild, Rollup, and webpack may need production added to their resolve conditions. Bundlers that skip it fall back to the development build, where the UI still sits behind a dynamic import — this is also what level 1 needs in a production deployment, since the stripped build contains no pane code and neither setTiaoEnabled(true) nor ?debug=true can bring it back. Use @nightmarket/tiao/core for controls that must exist in a shipped build.

See the full documentation.