Quick Start

Install the package with the R3F peers you already use in a Three.js React app.

pnpm add threejs-debug-view three react react-dom @react-three/fiber @react-three/drei leva

Use threejs-debug-view/r3f for React Three Fiber. The root package stays React-free.

import { DEFAULT_DEBUG_VIEWS } from "threejs-debug-view"
import { DebugViews } from "threejs-debug-view/r3f"

function DebugLayer() {
  if (!import.meta.env.DEV) return null
  return <DebugControls />
}

function DebugControls() {
  return (
    <DebugViews
      views={DEFAULT_DEBUG_VIEWS}
      layout="single"
      activeView={0}
    />
  )
}

For Leva controls, use the bundled hook from the same R3F entrypoint:

import { DEFAULT_DEBUG_VIEWS, getDebugViewLabels } from "threejs-debug-view"
import { useDebugViewsControls } from "threejs-debug-view/r3f"

const controls = useDebugViewsControls({
  viewLabels: getDebugViewLabels(DEFAULT_DEBUG_VIEWS),
})

Verification

Run the project checks before trusting a debug pipeline change:

pnpm typecheck
pnpm test