Introducing the GUI Editor Alpha!

Presenting the GUI Editor Alpha

Video Gif

Welcome everyone!

I am humbly proud to present to public launch of the GUI Editor Alpha:

Check out our blog post discussing the editor: Introducing the Babylon.js GUI Editor (Alpha) | by Babylon.js | Oct, 2021 | Medium

Here is the link to the documentation: The GUI Editor | Babylon.js Documentation

Feedback and Questions?

We want to hear from you! While this editor is still in alpha and is by no means a final product, we would love your feedback and thoughts. What do you like? What don’t you like? What can make your experience even better? Find a bug? Let us know! We highly value your insights and want the editor to evolve to meet your needs.

Please put all questions and feedback here on this thread. :slight_smile:

Thank you again for your amazing support of this platform and community. On behalf of the Babylon Team, we hope you enjoy the GUI Editor!


hi, any plan to release the source ?

It’s open source on the Babylon GitHub repo. Feel free to take a look! :smiley:


This is amazing @msDestiny14 ! I’ve had a bit of a play with it and it’s going to be a great time-saver. Looking forward to exploring in-depth!


I had the opportunity to test it before out of curiosity. It looks really good. Congratulations on all your hard work.
I would test it again when I have a little time and bring my ideas.


Pamela and team , amazing work. we are looking forward to playing with this!



Very nice tool, looking forward it!!!
Do you have plan to add a curve editor gui? like

It is necessary to make some materials :grin:

1 Like

Congratulations and thanks for this amazing tool! Seems like you guys put a lot effort on it. :clap:

1 Like

@Moriy we have one for animations already: Unleash your animations with ACE. ACE stands for Animation Curve Editor… | by Babylon.js | Medium

1 Like

well done on release. I will check it out some more some time soon again. Question… have you guys thought about making your textual numeric properties in your inspectors have “drag to update” values? It is actually the first thing i tried :wink: Some apps have it happen for both the value field and the label , some for only over the label. Honesntly some are inconsistent , eg Affinity designer/photo … some fields have this functionality and others dont … which does not make sense. I have not Opened Unity editor in a long time but I know they have it to some degree with inspector values as well. Blender is the best… it has it on all inspector numeric properties - this is where im now so used to it being a thing, i expect it everywhere haha. Anyway :wink:


@shaderbytes This is awesome feedback! Thank you!

This would be great time saver and quality of life improvement indeed. Currently the system is implemented in some of our numeric inputs but not the text typing ones like position and size for example.

Definitely something we will look into doing for you. :smiley:


great , if you really wanna get fancy , in blender any drag operation in the viewport uses modifier keys to change the behaviour in some way , SHIFT key allow micro incremental updating , CTRL key allows snapping. What is great is that when doing the “click and drag” on the inspector property field , eg x coordinate of the transform component , these modifiers still work!

I know that a whole bunch of extra work but I just wanted to mention it in case it interests you to make a note of such possibilities. Both such modifiers are in fact very handy.

Chat soon

Totally possible for us to do this too. And it’s not a burden or extra work at all, :wink: We want this editor to be shaped to the community’s desires.

Anything else you can think of big or small feel free to suggest it. For now I’m making notes of both.

1 Like

Can this be used to customize buttons as well as clone them without having to use a panel that the positions for each can be adjusted? Hopefully this makes sense :blush:


It would be possible that when we click on save, we can determine a default path for the output of the file.
In fact I would like to be able to record and that it goes in a direct directory of my project, without window which opens.
I think we can customize the recording system? And give a name to the json file?
I thought to give a name to the Root of the GUI for example and that when we save this name is automatically used to a directory that we define by default In a direct way.

1 Like

I found a “small” bug in the property panel of the editor interface when one object is selected.
In fact when we integrate the GUII editor in a tab (that the editor is not full page) as soon as we select a GUI object, the property panel items overlap.

See in picture:

1 Like

Great work msDesiny14 :slight_smile:

Nice to have:


  • created first a rectange then a text. saved it. changed the json: added another text at the end. loaded. The order is inverted:



Cool and great. But the user experience is a bit bad, such as: unable to adjust the size of the value through the scroll wheel, no color selector, and artistic fonts that are difficult to adapt.

1 Like