babylon.landing Open editor

library/babylon.js

A Babylon.js Playground and Online Editor for 3D

Build a Babylon.js scene in JavaScript — meshes, PBR materials, lights and a camera — and watch the WebGL canvas render live as you edit, with npm and nothing to install.

Open the Babylon.js editor How a scene renders
rendersWebGL / WebGPU
engineBabylon.js
packages@babylonjs via npm
installnone
scene.js
import { Scene, ArcRotateCamera, HemisphericLight,
  MeshBuilder, Vector3 } from '@babylonjs/core';

const scene = new Scene(engine);
new ArcRotateCamera('cam', 1, 1, 6, Vector3.Zero(), scene);
new HemisphericLight('light', new Vector3(0, 1, 0), scene);

MeshBuilder.CreateBox('box', { size: 2 }, scene);
// engine.runRenderLoop(() => scene.render());
babylon.js · WebGL canvas live

01 platform

What a full 3D engine gives you in a browser tab

Babylon.js is a complete 3D engine — a scene graph, PBR materials, lights, cameras, physics and animation — not just a renderer. The official playground is a single-file live editor; this adds the project tooling for when a scene grows past one file.

  • An engine, not just a renderer

    Babylon brings PBR materials, a scene graph, cameras, lights, animation and optional physics, so a realistic scene is assembly rather than plumbing you write yourself.

  • Live WebGL preview

    The canvas re-runs on save, so a changed material, a new light or a moved camera shows up immediately. You iterate against the render.

  • A real project workspace

    Where the official playground is one file, this gives you a file tree, npm, TypeScript and Git — for a scene split across modules with imported assets.

  • Private and installable

    The scene lives in your browser, never on a server, and installs as a PWA — so a work-in-progress stays yours and keeps working offline.

02 deep dive

Meshes, materials and a camera

A Babylon scene is a small set of ideas, and the editor is a good place to make each one concrete.

Meshes are the geometry. MeshBuilder creates boxes, spheres and ground, or you import a model; each mesh has position, rotation and scale you set directly and see move in the preview.

PBR materials look real. PBRMaterial gives physically based shading — metalness, roughness, environment reflections — which is much of why a Babylon scene looks less like a toy than a bare renderer.

Cameras and lights frame it. An ArcRotateCamera orbits a target and a HemisphericLight fills the scene, so what you built is visible and navigable from the first frame.

geometry
MeshBuilder
material
PBRMaterial
camera
ArcRotateCamera
light
HemisphericLight
material.js
import { PBRMaterial, Color3 } from '@babylonjs/core';

const m = new PBRMaterial('brushed', scene);
m.albedoColor = new Color3(0.85, 0.28, 0.35);
m.metallic = 0.9; m.roughness = 0.35;
box.material = m;
a physically based material

03 features

What ships with a Babylon.js project

Everything below is on the moment you open the Babylon.js editor, which starts as a PBR product configurator you can switch materials on.

  • npm for the modules

    @babylonjs/core, loaders, materials and the GUI resolve through esm.sh into a native import map, so you import exactly the parts a scene needs, with no node_modules.

  • Live WebGL preview

    Full width, split, in device frames or its own tab — so a scene can take the whole viewport while you tune materials and lighting.

  • TypeScript included

    Babylon ships types; write .ts for autocomplete on the large API and type-checking, stripped on the fast path.

  • Load models and textures

    Keep a glTF and its textures in the project and load them with the scene loader, or fetch them by URL, the same as a deployed scene.

  • Multi-file scenes

    Split meshes, materials and camera setup across modules with a file tree and tabs, rather than one long playground file.

  • Git and export

    Commit through isomorphic-git and export the project as a zip that runs anywhere.

04 deep dive

What the browser renders, and what it can't

Babylon runs entirely on your device's GPU here, which is a strength and a boundary worth naming.

Full WebGL, and WebGPU where supported. Meshes, PBR, shadows, post-processing and custom shaders run at your GPU's speed, and Babylon uses WebGPU on browsers that offer it, the same as a deployed page.

Assets are yours to bring. A loader fetches a model or an environment map from a URL, but there is no pipeline optimizing a huge glTF for you — keep assets reasonable or host them and load by URL.

It is the client half. Anything needing a server — a multiplayer backend, server-side baking — runs elsewhere; everything that runs in a browser tab in production runs here.

gpu
WebGL / WebGPU
shaders
custom, supported
assets
glTF by URL
server
elsewhere
loader.js
import { SceneLoader } from '@babylonjs/core';
import '@babylonjs/loaders';

SceneLoader.ImportMeshAsync('', url, 'model.glb', scene);
import a glTF model

05 workflow

From an empty scene to a lit, textured mesh

No install, no bundler, no dev server — the whole loop from a blank scene to a lit, PBR-textured mesh.

babylon-configurator — xcodx
  • new project → Babylon Configurator
  • created scene.js · @babylonjs/core via esm.sh
  • swap material: brushed → glossy
  • canvas repainted · reflections updated
  • install @babylonjs/loaders, import glTF
  • import map updated · model in the scene
  • git commit -m "material switcher + model"
  • [main a70c3d5] material switcher + model · 3 files

  • Nothing to set up

    No webpack, no dev server, no local Babylon install — the scene renders the moment you save.

  • The same loop on a tablet

    WebGL runs on the device GPU, so a tablet renders the scene the same way a laptop does.

  • Share by link

    Send a live preview URL and the recipient orbits the scene, not a screenshot.

06 ecosystem

Babylon.js among the graphics runtimes

Babylon is one of several things the editor runs on a canvas — the same tab renders a 3D engine scene, a 2D WebGL layer or a game, per file.

  • React
  • Vue
  • Angular
  • Svelte
  • SolidJS
  • Lit
  • HTMX
  • Vite
  • TypeScript
  • JavaScript
  • HTML
  • CSS
  • SCSS
  • Less
  • Pug
  • Tailwind
  • Bootstrap
  • Vuetify
  • Ant Design
  • shadcn/ui
  • Phaser
  • Node.js
  • Python
  • Java
  • C++
  • C#
  • Go
  • Rust
  • Ruby
  • PHP
  • Kotlin
  • Swift
  • SQL
  • Bash

07 languages

What the editor runs beside Babylon.js

A Babylon.js scene sits beside everything else the editor compiles in the browser, renders natively, or runs on demand.

Compiled in your browser11

Zero build step. Transform runs on a Web Worker, so typing never blocks.

  • JSX
  • TSX
  • TypeScript
  • Vue SFC
  • Svelte
  • Angular (JIT)
  • SolidJS
  • SCSS
  • Sass
  • Less
  • Pug

Rendered natively8

Straight to the live preview, no transform in the way.

  • HTML
  • CSS
  • JavaScript
  • JSON
  • Markdown
  • Jupyter (.ipynb)
  • SVG
  • YAML

Executed on demand22

70+ languages run through a self-hosted Piston engine. stdout, stderr, images and tracebacks land in the console.

  • Python
  • Java
  • C
  • C++
  • C#
  • Go
  • Rust
  • Ruby
  • PHP
  • Kotlin
  • Swift
  • Lua
  • Scala
  • Perl
  • Haskell
  • Elixir
  • Dart
  • R
  • Julia
  • SQLite
  • Bash
  • PowerShell

08 questions

Babylon.js in the browser — common questions

How is this different from the official Babylon.js Playground?

The official playground at playground.babylonjs.com is an excellent single-file live editor for snippets. This adds a real project workspace around the same engine — a file tree, npm packages, TypeScript and Git — for when a scene grows past one file and imports its own assets and modules.

Do I need a bundler or local install for Babylon.js?

No. @babylonjs/core and its modules resolve from npm through esm.sh into a native import map, so imports work with no webpack, no dev server and no node_modules. Opening the editor is the whole setup.

Does it use real WebGL, and WebGPU?

Yes. Babylon renders on your device's GPU through real WebGL, and uses WebGPU on browsers that support it, so PBR materials, shadows and custom shaders behave exactly as they would on a deployed page.

Can I load glTF models and textures?

Yes. Install @babylonjs/loaders, keep the model and textures in the project or host them, and load them with the scene loader. There is no asset-optimizing pipeline, so keep large files reasonable, the same as on a real site.

Can I write a Babylon scene in TypeScript?

Yes. Babylon ships type definitions, so .ts gives autocomplete on its large API and type-checking, with the types stripped on the fast pass that compiles the code.

Can I split a scene across multiple files?

Yes. Projects are multi-file, so meshes, materials, camera setup and helpers can live in separate modules with a file tree and tabs, and the whole scene commits with Git.

Do I need to install anything to use XCODX Studio?

No. XCODX Studio is a browser-based IDE — the editor, the compilers and the preview all run client-side. There is no download, no package manager to set up and no configuration file to write. Opening the editor is the whole setup step.

Where is my code stored?

In your own browser. Projects, file history and Git objects live in local storage on your device and are never uploaded to a server. That also means XCODX works offline: it is a Progressive Web App, so you can install it and keep coding with no connection.

Is XCODX Studio free?

Yes. The editor, the live preview, the 70+ language runtimes, npm installs, Git and the integrated terminal are all free to use.

Can I use XCODX on a tablet or Chromebook?

Yes. The editor is a responsive web app, so a Chromebook, an iPad or an Android tablet gets the same compilers and the same preview a laptop does — there is no desktop-only build, because there is no build to install at all. The layout adapts to the screen rather than shrinking a desktop UI into it.

Can I export a project or move it to my own machine?

Yes. Export the whole project as a zip with its folder structure intact and open it locally, or commit it and push. It is ordinary source on disk from that point on — no proprietary format and no lock-in, which is also why importing an existing repository from GitHub works the same way in reverse.

Nothing to install

Open the Babylon.js editor now

A lit, textured 3D scene on screen in under a minute — real WebGL, npm modules, with no account wall and nothing to install.

Open the Babylon.js editor Browse the docs