Jump to content

BabylonJS Editor V2


Recommended Posts

Hello awsome community!

The BabylonJS Editor V2 is now available and online! It comes with a web version and a native desktop application (Electron)!

From the V1, this new editor comes with a better user interface and more tools to write less, less, less lines of code


This demo video shows a project 100% made inside the editor. It includes custom scripts written using TypeScript, path finding, custom post-process and custom animations


  • Create and edit particle systems
  • Create and edit animations
  • Create and edit lens flares systems
  • Create and edit physics states on meshes
  • Create and edit materials (including materials library)
  • Add and edit sounds
  • Add and edit textures (including render target textures & procedural textures)
  • Save projects on OneDrive / local with Electron
  • Deploy project template on OneDrive / local with Electron
  • Scene graph view
  • Create and edit custom post-process
  • Create and edit custom materials
  • Attach custom scripts (JavaScript and TypeScript) to your objects
  • Test your scenes with debug support

Video tutorials

The documentation is available in the BabylonJS Documentation but now comes with videos to illustrate the written documentation: https://www.youtube.com/channel/UCNogU8tcA5IegFvMwE2Rckw/playlists

Some links

Full documentation: http://doc.babylonjs.com/resources/

Editor: http://editor.babylonjs.com/

Desktop Application: http://doc.babylonjs.com/resources/getting_started

Git Repository: https://github.com/BabylonJS/Editor


If you encounter a bug, don't hesitate to report in the forum and I'll make my best to resolve it.

Thanks for being BabylonJS users. Hope you'll like using this editor :)

Link to comment
Share on other sites


Right now the ArcRotate camera just rotates about itself. It does not rotate about the object selected.

Is there a shortcut key to focus on an object?

Sometime double clicking an object shifts focus to it. But that seems to be buggy. It does not work most of the time. Also after focusing, if you left click, hold and drag the mouse the screen remains unresponsive and  if you let go off the mouse the mouse goes into free look.

Link to comment
Share on other sites



Few other issues.

1) Under menu item "Project", the  "Clean Project" does not seem to work. The same project is displayed again but this time I am unable to select anything.

2) Instead of "Clean Project" maybe it should be called "New Project" ? Thats what most other  editors have.

3) I find the "Project" menu confusing.

We have
"Import Project", "Export Project", "Save Project as."
"Download Scene", "Export Scene As"

Not sure about the difference between
Export Project and Save Project
Download Scene and Export Scene. (what about import Scene?)

Also Project options and Scene options should be clubbed together under the Project menu?

4)  Anyway to select , edit or delete GUI Items in the screen?

Link to comment
Share on other sites


That was fast.
Much cleaner now.

"Import Project" does not seem to be working.
I see following error in console
Uncaught (in promise) TypeError: Cannot read property 'name' of undefined
    at Editor.eval (editor.js:1)
    at step (editor.js:1)
    at Object.eval [as next] (editor.js:1)
    at eval (editor.js:1)
    at new Promise (<anonymous>)
    at __awaiter (editor.js:1)
    at dialogCallback (editor.js:1)
    at eval (editor.js:1)
    at Object.eval [as callBack] (editor.js:1)
    at HTMLButtonElement.<anonymous> (w2ui.min.js:7)


"2) New Project with empty scene?" 
Is there any other way to create an empty scene?
Is there a way to delete everything in the scene in one stroke?
I tried deleting each item in the scene one at a time but wasn't able to delete any of the GUI elements.
So yes a new Project with empty scene would help

What is "Export Template"?
Is it a way to publish my scene?
When I do that it tries to log me into some Microsoft account. 
What if i do not have or want a a Microsoft account?
It should allow me to save it to my disk







Link to comment
Share on other sites


Oups! It works on my side, can you share the scene you are importing? Thanks!

2) ok for empty scene, just added, will be available ASAP :)

For the export template I have to update the doc to explain. The template contains a project for developers with the final scene and a minimalist typescript code to load the game you are developing (in mean index.html, scene, libraries etc) so you are able to develop your game as you can do without using the editor directly. Will update the doc and make a video to explain :)

Anyway, please use the electron version to export template or save your project. The web version of the editor will try to save files using OneDrive

Link to comment
Share on other sites

  • 4 weeks later...

Hello Luuacro,

She is nice this version 2. Good job. I was wondering how you made the splashScreen we see in this picture below. I would like to create something like that, but I have no idea where to start. If you have a PG example, it would be great.

Thank you and continue, your editor looks great.

[Edite] I ask the question in question/answer and I got an answer. Sorry for the inconvenience.


Link to comment
Share on other sites

  • 2 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...