Install & Compatibility
Where this runs
No compatibility data collected yet for this library.
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
Engine
✓ import { Engine } from 'react-babylonjs'
✗ const Engine = require('react-babylonjs').Engine
ESM-only since v3; named export
Scene
✓ import { Scene } from 'react-babylonjs'
Named export, not default
useBeforeRender
✓ import { useBeforeRender } from 'react-babylonjs/hooks'
✗ import { useBeforeRender } from 'react-babylonjs'
Hooks are in a separate subpath 'react-babylonjs/hooks' since v4.0.0
WithScene
✓ import { WithScene } from 'react-babylonjs'
HOC named export
NullableEngine
✓ import type { NullableEngine } from 'react-babylonjs'
Type import for engine reference
Minimal 3D scene with camera, light, ground, and rotating box using declarative React-Babylonjs.
import React from 'react';
import { createRoot } from 'react-dom/client';
import { Engine, Scene } from 'react-babylonjs';
import { Vector3, Color3, HemisphericLight, MeshBuilder } from '@babylonjs/core';
function App() {
return (
<Engine antialias={true} adaptToDeviceRatio={true} canvasId='babylon-canvas'>
<Scene>
<freeCamera name='camera' position={new Vector3(0, 5, -10)} target={Vector3.Zero()} />
<HemisphericLight name='light' intensity={0.7} direction={Vector3.Up()} />
<ground name='ground' width={6} height={6} />
<box name='box' size={2} position={new Vector3(0, 1, 0)} />
</Scene>
</Engine>
);
}
const container = document.getElementById('root');
const root = createRoot(container!);
root.render(<App />);
Errors
Common errors & fixes
The engine already has a running scene (or scene is null)
Engine component not rendered or multiple Engine instances
fixCheck that only one <Engine> component is mounted and that a canvas with the given id exists.
Cannot use 'useBeforeRender' outside of a Scene component
Hooks must be called inside a <Scene> component tree
fixWrap the component in a <Scene>.
Module not found: Can't resolve 'react-babylonjs/hooks'
Using v3 which does not have the hooks subpath
fixUpgrade to v4 or import from 'react-babylonjs'.
TypeError: Cannot read properties of undefined (reading 'getEngine')
Accessing Babylon API before engine initializes
fixUse useBeforeRender or await setup.
Audit
Dependencies
@babylonjs/corerequiredCore Babylon.js engine
@babylonjs/guioptionalBabylon.js GUI system
reactrequiredPeer dependency for React integration
react-domrequiredPeer dependency for React DOM rendering