UI Builder

Table of Contents

• Canvas background
• Viewport settings

UI Builder enables you to create, visualize, and modify UXML and USS files in a visual interface that’s integrated into the main Editor. Let’s look at the key features of UI Builder:

1. StyleSheets: This is where you manage layout and styling formatting rules (also known as USS selectors) to share styles across UXML Documents and UI elements.
2. Hierarchy: Similar to the SceneA Scene contains the environments and menus of your game. Think of each unique Scene file as a unique level. In each Scene, you place your environments, obstacles, and decorations, essentially designing and building your game in pieces. More info
   See in Glossary view, it displays the hierarchy of visual elementsA node of a visual tree that instantiates or derives from the C# VisualElement class. You can style the look, define the behaviour, and display it on screen as part of the UI. More info
   See in Glossary in your UXML document.
3. Library: This contains predefined or custom controls ready to be added to your hierarchy, like buttons, labels, and sliders. From here you can also add other UXML (templates) into your current UXML.
4. ViewportThe user’s visible area of an app on their screen.
   See in Glossary: This shows how your interface looks; you can edit elements directly in the Canvas using gizmosA graphic overlay associated with a GameObject in a Scene, and displayed in the Scene View. Built-in scene tools such as the move tool are Gizmos, and you can create custom Gizmos using textures or scripting. Some Gizmos are only drawn when the GameObject is selected, while other Gizmos are drawn by the Editor regardless of which GameObjects are selected. More info
   See in Glossary.
5. Code Previews: This shows the code that the UI Builder is creating behind the scenes for both the UI Document (UXML) and the StyleSheets (USS). You may have to resize the window in order to see it properly.
6. InspectorA Unity window that displays information about the currently selected GameObject, asset or project settings, allowing you to inspect and edit the values. More info
   See in Glossary: Use it to change the attributes and style properties of the selected element or USS selector.

💡 Tip: Saving UI assets

In UI Builder, save your changes from the Viewport menu (File > Save). This saves all open UXML and USS files.

Unlike Unity UI, the game can run in the Editor while you actively make changes in UI Toolkit. Look for the asterisk * next to the file name in the UI Builder’s Canvas header; this indicates unsaved changes.

Canvas background

Enabling the Canvas background can help you visualize your element styling over a color or background image. Select the UXML file in the Hierarchy pane and then choose a Canvas background that approximates the final UI interface to judge style changes in context.

The Canvas background provides a few different options:

• Background Color: Represents a specific shade or hue of the game environment

• Image: For choosing a spriteA 2D graphic objects. If you are used to working in 3D, Sprites are essentially just standard textures but there are special techniques for combining and managing sprite textures for efficiency and convenience during development. More info
  See in Glossary or texture as the background (useful for replicating mockup screens or reference art)

• CameraA component which creates an image of a particular viewpoint in your scene. The output is either drawn to the screen or captured as a texture. More info
  See in Glossary: Displays the current gameplay in the background, enabling you to see the UI in context of the actual game

Viewport settings

To navigate the work area, adjust the zoom level (between 25%–500%), or choose the Fit Canvas option which automatically adjusts the zoom according to the current screen real estate.

Use Preview to visualize the UI without accidentally editing the selected elements. When active, the Viewport can also show styles applied for specific mouse events (e.g., hovering, focusing).

💡 Tip: Match Game view and themes

To approximate a runtime UI, select the currently loaded UI Document (UXML) in the Hierarchy and check Match Game View. This sizes the Viewport to your project Reference Resolution. Remember that modifying this parameter does not affect the UI files themselves, only the visualization. From UI Builder you can also previsualize different themes used in your project, a feature that’s covered later in the guide.