Improving the Babylon playground

A sneak peek into the planned features and enhancements

Hello, fellow Babylonians! I hope you are having a great time creating amazing 3D scenes and games with Babylon.js. If you are like me, you probably use the Babylon.js playground a lot, to test your ideas, share your code, and learn from others. The playground is a wonderful tool that lets you write and run Babylon.js code in your browser, without any setup or installation. It is fast, simple, and fun!

The playground hasn’t changed in a while. Yes, we had some awesome new features, and new editors joining the party, but the playground itself, its editor and the way we organize code stayed roughly the same for the last few years.

I have been working on a list of features and enhancements for the playground, and I would love to get your feedback and suggestions. Please note that these are not final or guaranteed features, just some ideas that I think would improve the playground experience. I believe all of these features are implementable — nothing is rocket science. It will just take time 😊

1. Implement a new URL schema

No more double-hash (#) in the address bar, which was confusing and didn’t work well on some browsers (looking at you, Safari!). Instead, you will see a simple URL schema that contains the playground ID and the version number.

Of course, we will maintain the wonderful advantages of using hashes — no need to reload the page to update the code or move from one snippet to the other. And of course, we will maintain backwards-compatibility with existing hashes.

2. Add the ability to add external javascript resources from npm as part of the stored playground

At the moment, it is not the easiest task to add new external dependencies to your playground. You had to manually add the script element every time you opened or shared a playground. This could lead to a dependency being reloaded every time we run the playground, which doesn’t work well with frameworks that have side-effects.

With this change, you will be able to add external JavaScript resources from npm as part of the stored playground, and they will be automatically loaded when you run or share the playground. This means you can use any npm package that you want, without any hassle. You can use any library that you like, and they will be available in the playground. How cool is that?

3. Update Monaco to the latest version

Monaco is the awesome code editor that powers the playground, and it is also used by VS Code, one of the most popular code editors in the world. Monaco provides a great editing experience, with features like syntax highlighting, auto-completion, code formatting, and more. However, the playground is using an old version of monaco, which was missing some of the latest features and improvements.

Updating Monaco will open the horizon to a set of new features.

4. Add experimental ESM support, instead of only supporting UMD

ESM, or ECMAScript modules, are the standard way of importing and exporting modules in JavaScript. They are supported by most modern browsers, and they offer many advantages over the traditional UMD, or Universal Module Definition, format. ESM allows for dynamic imports, which means loading modules on demand, instead of loading everything upfront. ESM is the future of JavaScript, and I want the playground to be ready for it. That’s why I want to add experimental ESM support, instead of only supporting UMD. This means you will be able to use the import and export keywords in the playground, and they will work as expected. You will be able to use dynamic imports, and they will be resolved at runtime.

The feature, at least at the beginning, will be experimental. We still need to see how we provide the es6 packages in order to use them in the playground.

5. Allow adding more than one file

Sometimes, you may want to organize your code into multiple files, instead of putting everything in one big file. This can make your code more readable, maintainable, and reusable. However, until now, the playground only allowed you to have one file, which was limiting and frustrating. Well, not anymore. You will be able to add more than one file to your playground, and they will be saved and loaded as part of the playground snippet. You can also rename, delete, or reorder your files, as you wish. You can also import and export modules between your files, using either UMD or ESM syntax. This will give you more flexibility and control over your code, and allow you to create more complex and modular playgrounds.

6. Improve the support for the babylon versioning system.

Babylon.js is a fast-moving and constantly evolving framework, which means that new features and improvements are added regularly. However, this also means that sometimes, things may change or break between different versions of the framework. That’s why it is important to be able to check your playground with different versions of Babylon.js, and see how they behave. Until now, you could only choose between the latest stable version, the last major version, or a custom version of Babylon.js, which was not very convenient or intuitive. That’s why I want to improve the support for the Babylon.js versioning system, and make it easier to check any playground with any version of the framework. With this feature, you will be able to choose from a list of all the available versions of Babylon.js, from the oldest to the newest. You can also type in a specific version number, and it will be loaded automatically. This will make it easier to test your playground with different versions of Babylon.js, and see how they affect your code and scene.

7. Allow defining the needed dependencies, instead of loading all of them.

Babylon.js is a very rich and powerful framework, that offers many features and capabilities. However, not all of them are needed for every playground, and some of them require external dependencies, such as physics engines, mesh decimation, or polygon triangulation. Until now, the playground was loading all of these dependencies by default, which was unnecessary and wasteful. This feature will allow you to set the dependencies you need and only load them on runtime. This will make your playground load faster, and use less bandwidth and memory. You will also have more control over your playground, and avoid potential conflicts or errors with unwanted dependencies.

8. Full TypeScript support, including tsconfig adjustment (related to the updated monaco)

TypeScript can help you write more robust and reliable code, by catching errors and bugs at compile time, instead of runtime. TypeScript can also provide better tooling and documentation, by using type annotations and declarations. However, until now, the playground did only partly support TypeScript. I want to add full TypeScript support, hopefully including tsconfig adjustment, to the playground. This is connected to the updated monaco version and the TypeScript abilities of the editor. Now, you will be able to write and run TypeScript code in the playground, and enjoy all the benefits of TypeScript. You will also be able to adjust the tsconfig options, such as strict mode, target, module, and more. This will make your playground more powerful and versatile, and allow you to use TypeScript with Babylon.js.

9. Allow changing the snippet server’s base URL — to use your own snippet server with the playground

The snippet server is the service that stores and loads the playgrounds, using a unique ID and a version number. The snippet server is hosted by Babylon.js, and it is free and open for everyone to use. However, sometimes, you may want to use your own snippet server, for various reasons. For example, you may want to have more control over your playgrounds, or you may want to use a different storage or database system. At its current state, the playground does not allow you to change the snippet server’s base URL. That’s why I want to add the option to change the snippet server’s base URL, and use your own snippet server with the playground. This will make your playground more flexible and customizable, and allow you to use your own snippet server with The Babylon.js ecosystem. Our own implementation of the snippet server is available on GitHub — BabylonJS/SnippetServerExpress, so you will be able to have your own version of it. You can also make any modifications you want, such as adding authentications.

10. Allow users to create a fork of an existing playground

One of the best things about the playground is that you can share your playgrounds with others, and learn from their playgrounds. However, until now, anyone who had the playground URL could generate new versions of the same playground, which could be confusing at times. The feature I want to add is a forking mechanism for existing playgrounds. If you open someone else’s playground you will not be able to save it with a new version number, but fork it and get your own snippet ID. Only the creator of the original playground will be able to generate new versions of the same playground, and no one else. This will make your playground more secure and organized, and avoid unwanted changes or conflicts. It is still unclear how we will deal with user detection. One thing for sure — we don’t want to add user authentication. So it will probably be a generated unique key stored locally.

11. Improve the export/download process

At the moment, downloading a playground provides you with a single HTML file, binary dependencies (like textures) and nothing else. We didn’t have a problem with that for quite some time, but just like the playground, the HTML file contains every single Babylon.js package. The method we are currently using will certainly not work with all of the changes I am suggesting. So let’s improve that!

The new export feature will provide everything needed, based on the user’s input — dependencies, assets, different files, everything needed in one zip file. This method will also support ESM! And optionally we could generate a project that you can open and work on locally — with everything needed, like package.json, tsconfig and more. So you could start your work in the playground, and once you are happy with the prototype, you can move to local development and really bring the experience to life!

And that’s it for now.

There are many other improvements that can be done to the playground. This was an overview of what I think are important steps forward to make the playground the best experience possible for the Babylon.js community.

Got a suggestion? a comment? think we are missing a whole different set of features? Let me know what you think!