Scaffold a Babylon.js Project with create-babylonjs

Overview

create-babylonjs is the official Babylon.js project scaffolder. Running a single command launches an interactive CLI that asks you a few questions and then generates a fully configured, ready-to-run project. No manual wiring of bundlers, TypeScript configs, or Babylon.js imports required.

Quick Start

npm create babylonjs

Then follow the on-screen prompts, and start your app:

cd my-babylonjs-app
npm install
npm run dev

You can also pass a project name directly to skip the first prompt:

npm create babylonjs my-scene

What the CLI Asks

The CLI walks you through four choices:

Generated Project

Every scaffolded project includes:

• A starter scene that loads a glTF model (boombox.glb) with environment lighting
• SceneLoader.AppendAsync for async model loading
• scene.createDefaultCamera() to automatically frame the loaded model
• scene.createDefaultEnvironment() for a skybox, reflective ground, and image-based lighting (IBL)
• A render loop with canvas resize handling
• package.json with dev, build, and build:prod scripts

ES6 Template

Uses tree-shakeable imports from @babylonjs/core and @babylonjs/loaders, along with the required side-effect imports for tree-shaken builds:

import { Engine } from "@babylonjs/core/Engines/engine";
import { Scene } from "@babylonjs/core/scene";
import { SceneLoader } from "@babylonjs/core/Loading/sceneLoader";
import "@babylonjs/core/Loading/loadingScreen";
import "@babylonjs/core/Helpers/sceneHelpers";
import "@babylonjs/core/Materials/standardMaterial";
import "@babylonjs/core/Materials/PBR/pbrMaterial";
import "@babylonjs/core/Materials/Textures/Loaders/envTextureLoader";
import "@babylonjs/loaders/glTF";

UMD Template

Uses the babylonjs and babylonjs-loaders packages with the global BABYLON namespace:

import * as BABYLON from "babylonjs";
import "babylonjs-loaders";

CDN-only Template (No Bundler)

A single index.html with <script> tags — no npm install required:

<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>

Template Matrix

The combination of module format, language, and bundler determines the generated files:

Bundler Configurations

Each bundler template includes a dev script for local development and a build:prod script for production:

Production Build

All bundler-based templates include a build:prod script that creates an optimized production bundle:

npm run build:prod

Deploy the contents of dist/ (or the project root for CDN-only) to any static hosting provider.

Choosing a Module Format

If you are starting a new project, ES6 is recommended. It enables tree-shaking — only the parts of Babylon.js your code actually uses are included in the bundle, keeping the final size as small as possible.

UMD is the better choice when:

• You want to use Babylon.js via <script> tags without a bundler (CDN-only option)
• You are copying examples directly from the Babylon.js documentation (most doc examples use the BABYLON.* namespace)
• You need a quick prototype without setting up a build pipeline

See ES6 / NPM Support and UMD / NPM Support for a deeper comparison.

Next Steps

After scaffolding, the generated src/index.ts (or .js) is your entry point. From there you can:

• Replace the sample model load with your own assets
• Add meshes, lights, cameras, and materials
• Explore the Babylon.js documentation and Playground for inspiration
• Install additional Babylon.js packages (@babylonjs/gui, @babylonjs/inspector, etc.) with npm install

Further reading

Babylon.js ES6 support with Tree Shaking

Learn about tree shaking and package management in Babylon.js.

NPM Support

Learn about Babylon.js's use of the NPM Package Manager.

Starter HTML Template

Get started with the workflow, from a simple webpage to a complete app with an IDE and development frameworks.

CDN Babylon.js Packages

Obtain BABYLON.js Packages via CDN.