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:

- index.html
- App.tsx
- Content.tsx
- declarations.d.ts
- index.css
- index.tsx
package-lock.json
package.json
tsconfig.json
webpack.config.ts

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

⚠️

You should already have a React project set up and running. If you haven’t done so yet, you’ll need to create a React app and ensure it’s working correctly before moving forward with the next steps.

To manually create a new Reactylon app, install the required packages:

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

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

style.css

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:

App.tsx

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:

Content.tsx

import React, { useEffect, useRef } from 'react';
import { Mesh, ArcRotateCamera, Tools } from '@babylonjs/core';
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;

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

Getting Started Reactylon Native