Hey!
Just dropped a new package on npm – big surprise it’s a React renderer react-babylon-lite (RBL). I was waiting to see if anybody was going to pick up the torch…
Anyway wanted to take a stab at it since nobody else was – and with a fresh start to try to fix a few things bugging me about react-babylonjs (@babylonjs/core + gui if you don’t know that one). The things bugging me:
- not tree shaking (which would be absolutely ridiculous to not support on babylon lite!)
- reconciler boundary restrictions (fixed with Zustand)
- factory constructor hacks (use key of fields to trick reconciler). instead factory fields cause re-creation and object swaps
- useGltf - didn’t like how my original way wanted to cache the model. Using the AssetContainer is really clean and works well in this way.
Good news is those 4 will be relatively easy to backport into react-babylonjs!
I managed to bring in a lot of the concepts that were working that I did like. Codegen with ts-morph, lifecycle management (attach strategies), dynamic component registration (HostConfigStore → extend), etc.
Wanted also to support a gltfjsx CLI for easier control of .glTF → JSX, so there’s a new library gltfjsx-rbl. This is based on pmndrs gltfjsx, but specific for Babylon Lite. Also, a library to support JSX host elements via plugin (also, let’s you skip needing to add imports yourself) with tree shaking (this was a good learning experience)!
It’s all been tested out with webpack analyzer. I have a bunch of follow up questions for the team with some unexpected things - wouldn’t call them obstacles. I’ll share them later this week - I need some fresh air. Babylon Lite is really a cool library ![]()
I wrote also a “hook” for somebody who wants to go imperative (like an easy way to put a PG in a React page w/o renderer) brianzinn/babylon-lite-hook: React hooks and Suspense-ready scene component for Babylon Lite (@babylonjs/lite). That’s completely separate from this package, actually - just FYI.
I think I got pretty much the full API down - just missing Navigation (Recast pathfinding) and Gaussian splatting. No plans to add them unless there is an GH issue.
The main library monorepo is here:
brianzinn/react-babylon-lite: React 19+ renderer for Babylon Lite (@babylonjs/lite) — tree-shakeable, Suspense-first, WebGPU-only
There’s docs listing functionality here - how to import or call:
react-babylon-lite/packages/react-babylon-lite/README.md at main · brianzinn/react-babylon-lite
There’s a live demo here that lays down how hooks and components work - I’ve included the JSX beside the code to help connect the dots. Might try to do something later with snippets and a PG like was done for react-babylonjs. Example pages:
react-babylon-lite example
Anyway, if anybody wants to give it a go - would be interested to hear any feedback in the API or how the hooks work.
Cheers! ![]()