#Quick start

This page makes one workspace with one window, then adds a second window from code.

Video tutorial: Quick start. All videos: Video tutorials.

#A window in UXML

1. In the Hierarchy, right-click, then click UI Toolkit > UI Document.
2. Select the new GameObject. In the Inspector, give the UIDocument a Panel Settings asset.
3. Make a UXML file with a workspace and a window:

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:tb="UIToolbox">
  <tb:Workspace name="workspace" theme-name="dark" style="flex-grow: 1;">
    <tb:WorkspaceToolbar>
      <tb:WorkspaceToolbarButton window-id="Hello" title="Hello" />
    </tb:WorkspaceToolbar>
    <tb:Window id="Hello" title="Hello" width="320" height="200" initial-window-state="open">
      <ui:Label text="Hello from UI Toolbox." />
    </tb:Window>
  </tb:Workspace>
</ui:UXML>

4. Drag the UXML file into the Source Asset field of the UIDocument.
5. Press Play. Drag the window by its title bar, resize it by an edge, and click the toolbar button to close and open it.

The styles load automatically. You do not add style sheets by hand.

#A window from code

Add this component to the GameObject that has the UIDocument:

using UIToolbox;
using UnityEngine;
using UnityEngine.UIElements;

public class AddWindow : MonoBehaviour
{
    private void Start()
    {
        var workspace = GetComponent<UIDocument>().rootVisualElement.Q<Workspace>("workspace");

        WindowDescriptor.Builder()
            .WithId("Stats")
            .WithTitle("Stats")
            .WithSize(300, 200)
            .WithContent(new Label("Created in code."))
            .BuildAndRegister(workspace, openImmediately: true);
    }
}

#A control without a workspace

The Toolbox controls work in any panel. This UXML needs no workspace:

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:tb="UIToolbox">
  <tb:Rating label="Rating" value="3" />
  <tb:Switch label="Music" value="true" />
</ui:UXML>

#Next steps

• Build the same screens with drag and drop: Build a screen in UI Builder.
• The Setup Wizard makes the scene objects and the files for you: Setup Wizard.
• The demo shows each control and each example: Example scenes.
• All window attributes and the builder: Create windows.
• The model behind the windows: How it works.
• Colors, sizes and fonts: Theme variables.