Reactylon

System Requirements

• Node.js 22.11 or later.
• macOS, Windows (including WSL), and Linux are supported.

Automatic Installation

It is recommended starting a new Reactylon app using create-reactylon-app, which automatically sets up everything for you, including physics system. The project is built with React 19. To create a project, run:

npx create-reactylon-app my-app

create-reactylon-app will create a folder named my-app with your project name and install the required dependencies. If everything went as expected, you should see an output like the following:

✔ Creating a new Reactylon app in my-app.
✔ Installing packages. This might take a couple of minutes.
 
Reactylon app successful created.

Your file system will contain a new folder named my-app and it will look like this:

Now move on my-app folder and start the live server:

cd my-app
npm start

Going to http://localhost:3000, you should see an output similar to the following:

Manual Installation

npm install @babylonjs/core @babylonjs/gui reactylon --save

npm install @babylonjs/core @babylonjs/gui reactylon react-reconciler@0.29.2 --save

Add the style creating a new .css file or adding the following style to your stylesheet:

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
 
#reactylon-canvas {
    width: 100%;
    height: 100%;
    touch-action: none;
}

Preprare the Engine and the Scene:

import { Engine } from 'reactylon/web';
import { Scene } from 'reactylon';
import Content from './Content';
 
// ...
 
<Engine antialias>
    <Scene onSceneReady={scene => scene.createDefaultCameraOrLight(true, undefined, true)}>
        <Content />
    </Scene>
</Engine>

Create a file named Content.tsx containing a rotating box:

import React, { useEffect, useRef } from 'react';
import type { Mesh, ArcRotateCamera } from '@babylonjs/core';
import { Tools } from '@babylonjs/core/Misc/tools';
import { useScene } from 'reactylon';
 
const Content: React.FC = () => {
 
    const scene = useScene();
    const boxRef = useRef<Mesh>(null);
 
    useEffect(() => {
        (scene.activeCamera as ArcRotateCamera).beta = Tools.ToRadians(70);
        function rotation() {
            boxRef.current!.rotation.y += 0.01;
        }
        scene.registerBeforeRender(rotation);
        return () => scene.unregisterBeforeRender(rotation);
    }, []);
 
    return (
        <box ref={boxRef} name="box" options={{ size: 0.25 }} />
    );
};
 
export default Content;

Babel Plugin Reactylon

To work efficiently, a Reactylon application requires a dedicated plugin that enables tree shaking. This plugin performs static analysis on Reactylon JSX elements, automatically handling the imports and registrations of the corresponding Babylon.js classes. As a result, only the components actually used in your application are included in the final bundle, significantly reducing bundle size and improving performance.

Install the plugin with the command:

npm install babel-plugin-reactylon --save-dev

Then, learn how to configure it for your setup by visiting the Babel Plugin Reactylon page.

In the end, starting your own server, you should see the same rotating box like above.