Skip to main content

Getting Started with BabylonJS

BabylonJS Logo

BabylonJS is a powerful, open-source game and rendering engine for the web. It's also the native rendering engine for all Bitbybit visual programming editors, which means you get the most complete integration experience with this engine.

Official homepage: babylonjs.com

Three Ways to Use BabylonJS with Bitbybit​

1. Visual Editors (No Setup Required)​

The easiest way to get started. Just open one of our online editors and start building:

  • Rete Editor - Connect visual nodes to create parametric 3D models. If you've used Grasshopper, Dynamo, or Blender Nodes, this will feel familiar.

  • Blockly Editor - Drag and drop blocks to build 3D models. Great for beginners and educational settings.

  • Monaco Editor - Write TypeScript code directly in your browser with full intellisense.

Scripts created in any of these editors can be exported as JavaScript and run on your own website using Bitbybit Runners.

2. NPM Packages (For Developers)​

If you're building a production application or prefer working with TypeScript in your own development environment, use our NPM packages.

The quickest way to start a new project:

npx @bitbybit-dev/create-app my-project --engine babylonjs
cd my-project
npm install
npm run dev

This creates a ready-to-run project with Vite, TypeScript, and all three CAD kernels (OCCT, JSCAD, Manifold) pre-configured.

NPM packages give you full TypeScript support with intellisense, optimized bundle sizes through tree-shaking, and are the recommended approach for production applications.

Note that NPM packages only include our open-source algorithms. To understand which parts of Bitbybit are open-source and which are not, see our Open Source Approach guide.

Detailed setup guide: Quick Start with BabylonJS

3. Runners (Quick Prototypes)​

Runners are single JavaScript files that bundle everything you need. They're perfect when you want to quickly prototype something without setting up a build environment.

Full Runner - Includes both BabylonJS and Bitbybit in one file:

<script src="https://git-cdn.bitbybit.dev/latest/runner/bitbybit-runner-babylonjs.js"></script>

Lite Runner - Just Bitbybit, you load BabylonJS separately (smaller download):

<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://git-cdn.bitbybit.dev/latest/runner/bitbybit-runner-babylonjs-lite.js"></script>

Runners work great for demos on CodePen, JSFiddle, or StackBlitz. However, they only support JavaScript (no TypeScript) and have larger bundle sizes, so NPM packages are better for production work.

Learn more: Introduction to Runners - Understand runner capabilities, limitations, and how to export visual scripts as JavaScript.

Runner guides: Full Runner | Lite Runner

NPM vs Runners - Which Should I Use?​

Choose NPM packages when you're building something for production, want TypeScript support, or need optimized bundle sizes.

Choose Runners when you're prototyping, creating quick demos, or just want to experiment without any setup.

Next Steps​

If you're new to 3D programming, start with the Rete Editor to get familiar with the concepts visually.

If you're a developer ready to build, run the NPX command above and check out the starter template guide.

If you want to understand BabylonJS better, read About BabylonJS for a deeper look at the engine's capabilities.

Resources​