The web is evolving.
With the rise of VR headsets, AR glasses and spatial computing, the way we interact with digital content is fundamentally changing. We are moving beyond flat 2D interfaces toward immersive 3D-first experiences and XR is at the center of that shift.
Thanks to technologies like WebXR, immersive experiences can now run natively in the browser, making it easier than ever to deliver VR and AR directly to users - no installs, no friction.
TL;DR: Reactylon lets you build cross-platform XR experiences using React and Babylon.js, with a declarative syntax and seamless WebXR support.
Today, two major players are pushing XR experiences on the web: Babylon.js and Three.js.
In this post, we’ll focus on Babylon.js - a powerful open-source 3D engine known for its simplicity, high performance, and vibrant community. Designed with flexibility and extensibility in mind, it empowers developers to build immersive, high-quality 3D experiences directly in the browser.
But even with all its power, building complex XR apps with Babylon.js alone can require managing a lot of low-level logic and imperative code.
That’s where Reactylon comes in.
What is Reactylon?
A powerful open-source multiplatform framework built on top of Babylon.js and React, designed to create interactive and immersive XR experiences. Write once, and deploy seamlessly across your preferred platforms—web, mobile, and VR/AR/MR headsets.
Why Reactylon?
Reactylon abstracts away much of the complexity involved in Babylon.js development, making it easier to manage and create 3D scenes without losing the flexibility or performance of Babylon.js. By adopting a React-like paradigm, developers can create 3D scenes using familiar JSX syntax. This approach automates key Babylon.js lifecycle tasks, such as object instantiation and disposal, scene injection, managing parent-child relationships within the scene graph, and more, making the development process more intuitive and efficient.
What sets this framework apart is its ability to work seamlessly across platforms, allowing you to develop immersive experiences that can run on web, mobile, and XR devices like VR/AR headsets. Whether through Progressive Web Apps (PWAs) or leveraging Babylon Native and React Native, your 3D applications can deliver high performance on a wide range of devices.
Core Components
Here are the core components that help you create rich, interactive 3D environments, manage complex scenes, and seamlessly integrate advanced features, all within the familiar React paradigm:
Cameras: Various camera types (e.g., Universal, Free, ArcRotate) make it easy to navigate 3D scenes.
Lights: Add lighting effects to your scenes with declarative components for different light types, including Directional, Point, Spot, and Hemispheric lights.
Meshes: Manage 3D objects like boxes, spheres, and custom models with React components. You can control the position, scale, and rotation of meshes, and organize them into your scene.
Materials: Define the look and feel of your meshes with materials. Reactylon simplifies the process of applying textures, colors, reflectivity, and more, helping you create realistic visuals.
Graphical User Interface (GUI): Add 2D overlays on top of your 3D scenes to create interactive UI elements like buttons, sliders, and text, making it easier for users to interact with your XR applications.
Audio: Create an immersive audio experience by adding 3D sound. You can position audio sources in your scene, control playback, and synchronize sound with animations and events.
Physics: Reactylon supports physics for realistic object interactions, including gravity, collisions, and other physical behaviors, using Havok physics engine.
Model Loading: Easily import and load 3D models (e.g., glTF, OBJ) into your scene. Reactylon streamlines the process, ensuring smooth and efficient model loading.
Custom Hooks: Use React’s hooks system to manage state and logic within your 3D scenes. Custom hooks promote modularity and reusable components for a cleaner codebase.
Animations: Declarative animations make it simple to animate properties such as position, rotation, scale, and color. Reactylon leverages React’s declarative style for easy animation management.
Events: Handle scene events, such as clicks and hover interactions, directly within the React state and lifecycle model. Reactylon integrates Babylon.js’s event system seamlessly with React's structure.
Extended Reality (XR): With built-in WebXR support, Reactylon enables developers to create immersive VR, AR, and MR experiences that run natively in the browser and on supported devices like headsets and AR glasses.
Try It Out
Getting started with Reactylon is quick and frictionless - whether you're just exploring or diving into full XR development.
The documentation walks you through the core concepts of Babylon.js in the context of Reactylon. With 100+ interactive code sandbox examples, you can experiment in real-time — modify the code, run it instantly, and see the results in a fully isolated environment.
Get Involved
Reactylon is still early, but evolving fast. If you're passionate about XR, 3D, or React, your feedback, ideas, and contributions are more than welcome.
Give the project a ⭐️ on GitHub, try it out in your next build or feel free to reach out - I’d love to hear what you think!