Introducing the GUI Editor Alpha!

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:


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

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

I think we can arrange something like this in the interface. Maybe a setting in the general tab which allows you to set a permanent file path as well as an additional “Save As” button.

Also for the button. Good find. What browser are you using. Seems like its doesn’t have the right font being loaded, but I should safeguard even if the correct font is not loaded.

I will log both the request and bug for you. :slight_smile:

1 Like

Thank you @user2 for the feedback. It’s good for us to hear what frustrates you UX wise so we can hopefully turn that around for everyone.

The scroll wheel and color selector are items we plan to implement in the coming updates. Stay tuned! For the font. Would you like the ability to upload your own font? I agree this would be way less limiting. I can look into some ways to try to make that happen.

Please let us know of anything else on your mind.

I’m not entirely sure what you asking :thinking:
We do have a copy button but I don’t think that’s what you mean…


Heya, I’m happy to be trying out the new GUI editor! :slightly_smiling_face: Here’s an initial issue I’m experiencing on my MacBook thou. Part of the toolbar (the one on the left, for adding components to the GUI) is cut off. On Chrome the bottom half of the slider button is cut off and on FireFox the slider button is completely cut off.

Here’s some screenshots to show better what I mean:

EDIT: in case anyone else is having this problem, I just zoomed the browser out to 80% and now can see and use the missing components, Slider, VirtualKeyboard, and ColorPicker :slightly_smiling_face:

1 Like