React Three DOM, built by Poimandres, is a Chrome extension that links React Three Fiber component trees with the Three.js scene graph for in-browser inspection and debugging. It integrates into DevTools so developers can traverse scene hierarchies, find the React component behind a mesh, and edit Three.js properties with immediate canvas updates. The extension adds an R3F tab, visual highlighting, and real-time prop editing for faster iteration. Targeted at web developers and 3D technical artists, it shortens the feedback loop when tuning positions, materials, or lighting.

The tool clarifies which React components render which meshes.

Inside the DevTools R3F tab the scene graph presents 3D objects alongside their React counterparts, letting you inspect component instances and their live props. Component mapping identifies which component created a mesh and selection triggers visual highlighting in the canvas. The panel lists property names and current values, so developers can target the exact node responsible for layout, animation, or material issues.

Live prop edits speed iterative tuning without full page reloads.

The extension supports direct edits to component props and Three.js attributes with immediate visual feedback, enabling hot-tweaking of positions, rotations, and material parameters while the app runs. Because the tool is maintained by the developer collective behind many R3F libraries, its object model follows declarative React patterns and preserves property names between source and inspector, which reduces guesswork when tracing the origin of a visual artifact.

The tool is purpose-built for React Three Fiber and has a narrow scope.

Detection requires a compatible React Three Fiber implementation and a fully loaded page, so the inspector may not appear for vanilla Three.js scenes. The extension integrates into Chromium DevTools, giving reach across Chromium-based browsers, but its specialization means teams that mix plain Three.js and R3F code cannot use it as a universal scene inspector; it is intended for projects already using the React-based approach.

A focused utility for R3F teams, with clear scope and trade-offs.

React Three DOM is a practical choice for teams committed to React Three Fiber who need tighter feedback between component code and rendered scenes. Because the extension targets R3F specifically, projects using plain Three.js must look elsewhere. Tip: add the extension to early development sprints to catch structural mismatches before profiling, making the debugging phase more efficient for R3F-heavy workflows.