There is a new version of the react-babylonjs docs up and it’s improved in many, many ways - I’m intending to do a separate post on that. This is honestly all the work from a community contribution from @ViktorZhurbin – This post is about the new Playground feature. One thing that makes it different from the official Playground, besides supporting React and react-babylonjs is that it supports real-time editing of JSX and recovery from error boundaries, but also maintains intellisense/code completion of babylon.js. It also saves snippetIds and it was originally auto-saving, but we are trying to work out to restore auto-save while maintaining ownership of snippets to make them immutable.
Once you have made changes to a PG then the “save” button is available. Clicking it will give you a snippet Id that you can share (via buttons or URL) - this will be really useful for github issues on react-babylonjs. An existing snippet you can “fork” it and it will generate a new snippetId for you, but it is linked similar to how forking works with source control repositories as the original source snippet is tracked.
Like all the examples in the website - the PG can be opened up in Code Sandbox - this provides an easy way to add more npm libraries and also to generate a new project/website.
You can switch between Preview/Code/Split views. It’s mobile friendly. Unlike the examples in the docs, which support multiple files, the PG is a single file. You can also switch back and forth between TypeScript and JavaScript and open fullscreen.
Looking forward to some feedback for improvements. The only issue I know about right now is when going to fullscreen or switching from preview to full screen that the clicking regions are off. I’ll try to sort that out soon, but I just couldn’t wait any longer - it’s pretty exciting new feature. It’s all running on github pages without any infra, except for the snippet saving.
Give it a go - love to hear any feedback. Cheers.