Skip to main content

Your 3D canvas is no longer a black box.

Test, inspect, and debug React Three Fiber scenes — the same way you work with the DOM.

react-three-dom mirrors your Three.js scene graph into real HTML elements, unlocking Playwright, Cypress, and Chrome DevTools for 3D. Query objects by name. Assert positions, materials, and hierarchy. Click, drag, and draw — all deterministically.

Get StartedAPI Reference

Write your first test in seconds

import { test } from '@react-three-dom/playwright'; import { expect } from '@playwright/test'; test('hero cube', async ({ page, r3f }) => { await page.goto('/'); await r3f.waitForSceneReady(); await expect(r3f).toExist('hero-cube'); await expect(r3f).toHaveColor('hero-cube', '#ffa500'); await r3f.click('hero-cube'); });

Why react-three-dom

{}
DOM Mirror

Every Three.js object becomes a real HTML element. Your scene is now visible to testing tools, DevTools, and accessibility APIs.

>>
Playwright & Cypress

27+ assertions, 8 interaction types, 5 waiter strategies. Semantic E2E tests for 3D — no screenshots needed.

<>
DevTools Extension

Browse the scene tree, inspect geometry and materials, select objects with hover-to-highlight — right in Chrome DevTools.

##
Scales Effortlessly

Two-tier data, amortized sync, LRU eviction. Handles 100k+ objects at ~120 bytes each without blocking the render loop.

[]
Multi-Canvas

Multiple <Canvas> elements, each with its own isolated bridge. Query and interact with any canvas independently.

?!
Rich Diagnostics

Fuzzy suggestions when objects aren't found. Terminal reporter with bridge status, scene stats, and WebGL info.