react-babylon-lite

React 19 renderer for @babylonjs/lite — tree-shakeable, Suspense-first, WebGPU-only.

npm add react-babylon-lite @babylonjs/lite react

import { Canvas, useFrame } from 'react-babylon-lite';
import { ArcRotateCamera, Box, HemisphericLight, PbrMaterial } from 'react-babylon-lite/components';

const App = () => (
  <Canvas fallback={<p>booting engine…</p>}>
    <ArcRotateCamera radius={6} />
    <HemisphericLight direction={[0, 1, 0]} />
    <Box size={2} position={[0, 1, 0]}>
      <PbrMaterial baseColorFactor="#ff6a00" roughnessFactor={0.4} />
    </Box>
  </Canvas>
);

camelCase intrinsics (<box/>) need a build plugin

The imported-component style (<Box/>) above needs no setup. The camelCase style (<box/>) is an opt-in alternative where the component imports are added for you automatically at build time — it takes two steps:

1. Types — import the generated global augmentation once (anywhere in your app):

   // Types-only: this loads the global JSX augmentation that types <box/>. The runtime
   // module is empty, so it tree-shakes away — the ambient types stay regardless.
   import 'react-babylon-lite/intrinsics';

2. Runtime — there is no runtime tag registry, so babel-plugin-rbl rewrites each camelCase tag into a tree-shakeable component import at build time. Add it to your build:

   // vite.config.ts — @vitejs/plugin-react v6 / oxc has no Babel hook, so this is a
   // standalone pre-transform that works with Babel, oxc, and SWC setups alike.
   import react from '@vitejs/plugin-react';
   import reactBabylonLite from 'babel-plugin-rbl/vite';
   
   export default defineConfig({
     plugins: [reactBabylonLite(), react()],
   });

   // …or plain Babel (.babelrc / babel.config.json)
   { "plugins": ["babel-plugin-rbl"] }

Then <box position={[0, 2, 0]}/> type-checks (position is Vec3Input, arity-checked) and tree-shakes exactly like <Box/>. Without the plugin, camelCase tags raise a helpful error — fall back to extend({ box: Box }) or the imported components.

Main package docs

The full export and subpath-module reference lives in the package README: packages/react-babylon-lite.

Workspace

Package	Purpose
packages/react-babylon-lite	The renderer (react-reconciler 0.33, React ^19.2)
packages/babel-plugin	Lowercase-JSX rewrite plugin (. babel plugin, ./vite standalone pre-transform)
packages/gltfjsx	gltfjsx-rbl CLI: .glb → typed declarative component (the animation scene's fox)
packages/example	Vite app: 15 scenes + the bundle-size proof (pnpm --filter @rbl/example dev, GH pages)
tools/codegen	Generates components from lite's index.d.ts — add a manifest line, run pnpm codegen

Development

pnpm install
pnpm test        # mocked suites + real-lite NullEngine integration matrix
pnpm build
pnpm codegen     # regenerate components (CI asserts this is a no-op)

For live iteration, run two watchers side by side — tsc --watch on the renderer emits dist/, which the example resolves through workspace:*, so Vite HMR reloads on every renderer edit:

pnpm --filter react-babylon-lite watch   # terminal 1: type-check + emit dist on change
pnpm --filter @rbl/example dev           # terminal 2: Vite dev server (15 scenes)