Welcome to Reactylon, a groundbreaking framework that empowers developers to create immersive and interactive XR experiences using the power of React and Babylon.js. With its multiplatform capabilities, you can build 3D applications that seamlessly integrate with React's architecture, providing a seamless development experience.

To get started, simply use the official create-reactylon-app CLI, which bootstraps a full React 19 project with a preconfigured Babylon.js engine, physics support, and a starter scene. No setup required! Simply run npx create-reactylon-app my-app and explore the Getting Started guide for a complete walkthrough.

Reactylon's innovative approach to declarative syntax allows you to write 3D scenes in JSX, leveraging the power of declarative UI that React developers love. This seamless integration with Babylon.js enables you to build complex XR experiences with ease.

In addition to its declarative syntax, Reactylon also offers full TypeScript support, automatically generating and utilizing the appropriate props for each Babylon.js entity within their corresponding React components. This ensures type safety and performance out of the box.

But that's not all - Reactylon also provides automatic object management, handling the disposal of objects like meshes, cameras, and lights when their corresponding components are destroyed, ensuring efficient resource management and preventing memory leaks.

With cross-platform support for web, mobile, VR/AR/MR headsets, you can deploy your 3D applications natively to mobile devices and XR headsets with ease, expanding your audience reach across devices. Scene injection simplifies scene management, reducing boilerplate code and letting you focus on building rich 3D experiences.

Parent-child relationships are also automatically managed, making it easier to build complex hierarchies of meshes, lights, and cameras without manually managing Babylon.js's scene graph. And with enhanced React integration, you can easily manage state, compose components, and use hooks, ensuring a seamless development experience that leverages React's full power in 3D rendering.

Use Reactylon if:

  • You want to build 3D or XR experiences using React and JSX instead of imperative Babylon.js code.
  • You need cross-platform support (web, mobile, VR/AR/MR headsets) from a single codebase.
  • You care about type safety, tree-shaking, and performance out of the box.
  • You prefer an opinionated layer that manages scene graph, resource disposal, and hierarchy for you.

Get started with:

  • create-reactylon-app: Zero-config CLI to scaffold a new Reactylon project with a simple scene.
  • babel-plugin-reactylon: Babel plugin that powers Reactylon's JSX-to-Babylon compilation, enabling ergonomic, declarative 3D/XR components while keeping the output fast and tree-shakeable.

Join the community:

We welcome contributions to improve and expand this project! To get started, please read Contributing. This document provides all the necessary steps and best practices for submitting contributions.

We expect all contributors to adhere to our Code of Conduct, outlining our standards for respectful and inclusive interactions within the project community.

For any help or support, please reach us at contact@reactylon.com.

License:

Reactylon is licensed under the MIT License, with the inclusion of other dependencies licensed under separate terms:

  • Babylon.js: Licensed under the Apache License, Version 2.0.
  • React & React Native: Licensed under the MIT License.

This project is tested with BrowserStack.