The GUI Editor

Creating GUIs With Ease

Introduced in Babylon.js 5.0, the GUI Editor is a visual editor for building complex and beautiful graphical user interfaces. Traditionally, Babylon GUIs had to be built in code, which could be a tedious and confusing process. The GUI Editor lets you see the interface as you're assembling it and makes it easy to manipulate all the parameters of each control.

You can access the GUI Editor here: https://gui.babylonjs.com/. The GUI Editor can also be opened in a pop-up window from the Inspector, allowing you to edit a GUI inside a scene and see your changes propagate back instantly!

This document walks you through the editor and its capabilities and should help you start creating your own GUIs quickly. If you're not familiar with the GUI system in Babylon.js and would like to learn more, you can read about it here: Babylon GUI Documentation

Getting Familiar With The Layout

Let's start by familiarizing ourselves with the different parts of the editor.

Header Bar

The Header Bar provides several handy items to help you navigate and manage your GUI creations.

The hamburger menu provides some helpful scene-management options, including saving and loading your progress locally, saving and loading your progress to the snippet server, and a quick 'help' link to access the Babylon.js GUI documentation.

Select (S)

The select button allows you to select different GUI controls within your scene.

Pan (P)

The move button allows you to pan around the GUI by clicking and dragging. You can also use the middle mouse button, or hold space and drag, to pan around your GUI.

Zoom (Z)

The zoom button allows you to click on the canvas and drag to zoom in. You can also hold ALT+click to zoom out.

Fit To Window (F)

When pressed, the Fit To Window button will snap the zoom and panning back to the starting position, where the entire canvas can be seen. If you have any controls selected, Fit To Window will crop the viewport around those controls.

Toggle Guides

The Toggle Guides button will display boundary lines for all of the GUI elements in your scene.

Artboard Color

Allows you to change the background color in the region outside of the canvas.

Responsiveness and Resolution

You can either specify a resolution for your canvas in pixels or turn on responsive mode, which lets you easily swap between common resolutions such as mobile and desktop. Responsiveness is an editor-only concept; it does not affect the exported GUI.

Hierarchy Panel

The Hierarchy Panel is an organized list of all of the GUI controls that you've added to the canvas. You can select controls from this list as well as click and drag to parent and unparent them.

The order of controls listed in the Layers Panel reflects the z-order of the scene, with the elements at the top of the list rendering above elements toward the bottom of the list.

If a control is placed behind another control in the scene, and it has a lower z-order, the only way to select it is from the hierarchy.

The 'eye' icon will show/hide controls on the canvas.

Controls Bar

The Controls Bar allows you to create GUI controls, such as a text box, rectangle, or grid. Each icon in this bar can be clicked to add a specific GUI control to your canvas. You can also drag and drop these icons into either the canvas or the hierarchy tree to add them to the scene.

If you'd like to see a full list of supported GUI controls in the editor, click here.

Canvas

The Canvas is the main work area of the tool. It contains the artboard where you can add controls, select controls, and click and drag controls to move them around. This panel provides a WYSIWYG (what you see is what you get) view of how GUIs will appear in Babylon.js scenes.

The checkerboard area reflects the content that will actually be visible in your scene when you load the GUI. Note that controls can be moved outside that region, which may be helpful if, for example, your UI has components that animate on and off screen.

Handy Keyboard Shortcuts

There are several handy keyboard shortcuts that you can utilize in the GUI Editor.

S = Select Mode
P = Pan Mode
Z = Zoom Mode
F = Fit to Window
G = Toggle Outlines
CTRL+A = Select All

With a GUI Control Selected:

CTRL+C = Copy
CTRL+V = Paste
CTRL+X = Cut
Delete/Backspace = Delete

Control Properties Panel

The Properties Panel will change based on which controls are selected to reflect the properties specific to those controls. This is where you'll find all of the properties and can fully customize each individual element of your overall GUI.

For example, here is how to change the name of a GUI.

For properties which can be expressed in either pixels or percentage values, you can click on the unit button next to the input to toggle between unit types. The existing value will be converted into the equivalent value in the other unit.

Note: While using the GUI Editor to create a GUI and modify its properties, these properties can later be changed in your Babylon.js scene code. This gives you full control over all GUI control properties at creation time as well as at runtime.

Special Properties for Grid Control

Grids are a powerful tool for building complex UI layouts. They are helpful for setting up the foundation of your design. Just like in code, in the GUI Editor you can define your grid's row and column definitions. You can add and remove rows and columns, as well as modify their sizes using either pixels or percentages.

You can then add controls to the grid through parenting in the Layers Panel. Once parented, you can modify a control's grid cell by selecting the control and editing the newly added property at the bottom of the Properties Panel.

Note: The zOrder of each control is determined by its position in the hierarchy tree, and it can be reordered with normal dragging regardless of which grid cell it belongs to.

Saving GUIs Out of the Editor

You can save your GUI creations from the Editor in two different ways: locally or on the Babylon.js Snippet Server.

Saving Locally

Saving locally will download a .JSON object of your GUI to your local machine. It can later be loaded back into the editor for future use, or hosted wherever you choose and loaded directly into your Babylon scene. See Loading GUIs Into The Playground

You can save locally by selecting the 'Save' button in the hamburger menu:

Saving To The Snippet Server

Like all Babylon tools, the GUI Editor lets you save your GUI creation directly to the Babylon.js snippet server. This saves the .json object to a Babylon.js server and returns a simple URL hash that you can reference later. You can then load your GUI back into the editor by using this unique hash, or use the hash to load your GUI directly into the Babylon scene. See Loading GUIs Into The Playground. Saving to the snippet server will also update the browser's URL to point to that snippet (e.g., gui.babylonjs.com/#aaaaaa)

You can save to the snippet server by selecting the 'Save To Snippet' button in the hamburger menu:

Loading GUIs Into the Editor

You can load your GUI creations into the Editor in two different ways, locally or from the Babylon.js Snippet Server.

Loading locally

Loading locally will prompt you to upload a .JSON object of your GUI into the Editor.

You can load locally by selecting the 'Load' button in the hamburger menu:

Loading From The Snippet Server

Loading from the snippet server uses the unique hash of a previously saved GUI and loads it into the Editor.

You can load from the snippet server by selecting the 'Load From Snippet Server' button in the hamburger menu:

Using GUIs From The Editor In Your Scene

It is very easy to load your saved GUIs into your Babylon.js scene and modify them. Here are a few handy examples:

Load From .JSON Object

You can load a GUI into your Babylon scene from a saved .JSON file hosted somewhere on the web, like this:

import { AdvancedDynamicTexture } from "@babylonjs/gui/2D/advancedDynamicTexture";
let advancedTexture = AdvancedDynamicTexture.CreateFullscreenUI("GUI", true, scene);
let loadedGUI = await advancedTexture.parseFromURLAsync("https://doc.babylonjs.com/examples/ColorPickerGui.json");

Load a GUI from a .json Object

Load From Snippet Server

You can also load a GUI into your Babylon scene from the Snippet Server like this:

import { AdvancedDynamicTexture } from "@babylonjs/gui/2D/advancedDynamicTexture";
let advancedTexture = AdvancedDynamicTexture.CreateFullscreenUI("GUI", true, scene);
let loadedGUI = await advancedTexture.parseFromSnippetAsync("#MMWSUI");

Load a GUI From The Snippet Server

Load in Fullscreen Mode

You can load your saved GUI as a fullscreen GUI that's overlaid on top of your entire scene like this:

import { AdvancedDynamicTexture } from "@babylonjs/gui/2D/advancedDynamicTexture";
let advancedTexture = AdvancedDynamicTexture.CreateFullscreenUI("GUI", true, scene);
let loadedGUI = await advancedTexture.parseFromSnippetAsync("#MMWSUI");

Load a GUI Into Fullscreen Mode

Further Information about fullscreen GUIs can be found here: Fullscreen GUIs

Load in Texture Mode

You can also load a saved GUI as a texture that can be used like any other texture in your scene. Here's an example of using a loaded GUI as a texture for the material of a mesh:

import { AdvancedDynamicTexture } from "@babylonjs/gui/2D/advancedDynamicTexture";
let screenUI = AdvancedDynamicTexture.CreateForMeshTexture(device.screen, 2048, 2048, true, false);
screenUI.parseFromSnippetAsync("#WFL50L");

Load a GUI Into Texture Mode

Further information about GUIs as in-scene textures can be found here: GUIs as a Texture

Changing GUI Control Properties In Your Scene

After loading a saved GUI into your scene, you can easily access the properties of your GUI controls.

You can access an individual control by name like this:

let backgroundBox = advancedTexture.getControlByName("BackgroundBox");
backgroundBox.background = "blue";

Load a GUI And Modify GUI Control Properties

A more sophisticated example can be found here:

Game Menu Demo

Playground Templates

You can also find quick access to the common lines of code needed to load GUIs into your scene, through the playground templates.

Supported Controls

Here is a list of supported GUI controls available in the GUI Editor:

Icon	Control Name	Further Information
	Rectangle	Rectangle Documentation
	Ellipse	Ellipse Documentation
	Stack Panel	Stack Panel Documentation
	Grid	Grid Documentation
	Scroll Viewer	Scroll Viewer Documentation
	Line	Line Documentation
	Text Block	Text Block Documentation
	Input Text	Input Text Documentation
	Input Password	Input Password Documentation
	Image	Image Documentation
	Display Grid	Display Grid Documentation
	Text Button	[A Button with a Text Block as a Child] (https://doc.babylonjs.com/divingDeeper/gui/gui#button)
	Checkbox	Checkbox Documentation
	Radio Button	Radio Button Documentation
	Slider	Slider Documentation
	Virtual Keyboard	Virtual Keyboard Documentation
	Color Picker	Color Picker