Get started with runtime UI

You can create a runtime UI and display it in a Game view by the following steps:

Create a UI Document (.uxml) with controls.
Add a Panel Renderer GameObject in the scene and add the UXML file as the source asset for it.
Create MonoBehaviours to define the behavior of your UI controls.

Try the following simple runtime UI example to get started. The example adds a label, a button, a toggle, and a text field in a 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. When you click the button, the Console windowA Unity Editor window that shows errors, warnings and other messages generated by Unity, or your own scripts. More info
See in Glossary shows a message. When you select the toggle and click the button, the Console window shows how many times the buttons have been clicked. When you enter a text message in the text field, the Console window shows the message.

Prerequisites

This guide is for developers familiar with the Unity Editor, UI Toolkit, and C# scripting. Before you start, get familiar with the following:

UI Builder
UXML
Visual TreeAn object graph, made of lightweight nodes, that holds all the elements in a window or panel. It defines every UI you build with the UI Toolkit.
See in Glossary
Label
Button
ToggleA checkbox that allows the user to switch an option on or off. More info
See in Glossary
TextField

You can find the completed files that this example creates in this GitHub repository.

Create a UXML Document with controls

Create a UXML Document with a label, a button, and a Toggle. For information on how to add UI controls with UI Builder or UXML, refer to Get started with UI Toolkit.

Create a project in Unity Editor with any template.
Create a UXML Document named SimpleRuntimeUI.uxml with the following contents:

<ui:UXML xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../../UIElementsSchema/UIElements.xsd">
    <ui:VisualElement style="flex-grow: 1;">
        <ui:Label text="This is a Label" display-tooltip-when-elided="true" />
        <ui:Button text="This is a Button" display-tooltip-when-elided="true" name="button" />
        <ui:Toggle label="Display the counter?" name="toggle" />
        <ui:TextField picking-mode="Ignore" label="Text Field" name="input-message" value="filler text" />
    </ui:VisualElement>
</ui:UXML>

Set up the scene

Create a Panel Renderer GameObjectThe fundamental object in Unity scenes, which can represent characters, props, scenery, cameras, waypoints, and more. A GameObject’s functionality is defined by the Components attached to it. More info
See in Glossary in the SampleScene and add the UXML Document as the source asset.

In the SampleScene, select GameObject > UI Toolkit > Panel Renderer. This creates the following:
- A UI Toolkit folder with a Panel Settings asset and a default runtime theme.
- A GameObject with a Panel Renderer component attached, and the Panel Renderer component is connected to the Panel Settings asset.
Select the Panel Renderer GameObject in the hierarchy and drag SimpleRuntimeUI.uxml from your Project windowA window that shows the contents of your Assets folder (Project tab) More info
See in Glossary to the Source Asset field of the Panel Renderer component in the 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 window. This references the source asset to the UXML file you created.

Define the behavior of your UI controls

To add logic, create a C# script that derives from MonoBehaviour to access the controls that the UI Document component references.

Unity loads a UI Document component’s source UXML when OnEnable is called on the component. To ensure the visual tree is loaded correctly, add logic to interact with the controls inside the OnEnable method.

Create a C# script named SimpleRuntimeUI.cs with the following contents:

using UnityEngine;
using UnityEngine.UIElements;
    
public class SimpleRuntimeUI : MonoBehaviour
{
    private Button button;
    private Toggle toggle;
    private VisualElement root;
    
    private int clickCount;
    
    private void OnEnable()
    {
        GetComponent<PanelRenderer>().RegisterUIReloadCallback(OnUIReload);
    }
    
    private void OnDisable()
    {
        GetComponent<PanelRenderer>().UnregisterUIReloadCallback(OnUIReload);
        if (button != null)
        {
            button.UnregisterCallback<ClickEvent>(PrintClickMessage);
        }
    }
    
    private void OnUIReload(PanelRenderer panelRenderer, VisualElement rootElement)
    {
        root = rootElement;
    
        button = root.Q("button") as Button;
        toggle = root.Q("toggle") as Toggle;
    
        button.RegisterCallback<ClickEvent>(PrintClickMessage);
    
        var inputFields = root.Q("input-message");
        inputFields.RegisterCallback<ChangeEvent<string>>(InputMessage);
    }
    
    private void PrintClickMessage(ClickEvent evt)
    {
        ++clickCount;
    
        Debug.Log($"{"button"} was clicked!" +
                (toggle.value ? " Count: " + clickCount : ""));
    }
    
    public static void InputMessage(ChangeEvent<string> evt)
    {
        Debug.Log($"{evt.newValue} -> {evt.target}");
    }
}

Add SimpleRuntimeUI.cs as a component of the Panel Renderer GameObject.

Test your runtime UI

Enter Play mode in the Unity Editor.
Interact with the button and toggle to check the debug messages in the Console.

Additional resources

Support for runtime UI

Configure runtime UI