UI Toolkit

Unity’s UI(User Interface) Allows a user to interact with your application. More info
See in Glossary Toolkit is a collection of features, functionality, resources and tools for developing user interfaces (UI). You can use UI Toolkit to develop custom UI and extensions for the Unity Editor, runtime debugging tools, and runtime UI for games and applications.

UI Toolkit is based on, and inspired by, standard web technologies. If you have experience developing web pages or applications, much of your knowledge might be transferable, and many of the core concepts might be familiar.

UI Toolkit Overview

This section provides a short description of the major UI Toolkit features, functionality, resources and tools, including:

• The UI system that contains the core features and functionality required to create user interfaces.
• UI Assets asset types inspired by standard web formats. Use them to structure and style UI.
• Tools and resources for creating and debugging your interfaces, and learning to use UI toolkit.

UI system

The core of UI Toolkit is a retained-mode UI system based on recognized web technologies. It supports stylesheets, and dynamic and contextual event handling.

The UI system includes the following features:

• Visual tree: Defines every user interface you build with the UI Toolkit. A visual tree is an object graph, made of lightweight nodes, that holds all the elements in a window or panel.
• Controls: A library of standard UI controls such as buttons, popups, list views, and color pickers. You can use them as-is, customize them, or create your own controls.
• Data binding system: Links properties to the controls that modify their values.
• Layout Engine: A layout system based on the CSS Flexbox model. It positions elements based on layout and styling properties.
• Event SystemA way of sending events to objects in the application based on input, be it keyboard, mouse, touch, or custom input. The Event System consists of a few components that work together to send events. More info
  See in Glossary: Communicates user interactions to elements; for example, input, touch and pointer interactions, drag and drop operations, and other event types. The system includes a dispatcher, a handler, a synthesizer, and a library of event types.
• UI Renderer: A renderingThe process of drawing graphics to the screen (or to a render texture). By default, the main camera in Unity renders its view to the screen. More info
  See in Glossary system built directly on top of Unity’s graphics device layer.
• UI Toolkit Runtime Support (via the UI Toolkit package): Contains the components required to create runtime UI. The UI Toolkit package is currently in preview.

UI Assets

The UI Toolkit provides the following Asset types that you can use to build user interfaces in a way that’s similar to how you develop web applications:

• UXML documents: Unity eXtensible Markup Language (UXML) is an HTML and XML inspired markup language that you use to define the structure of user interfaces and reusable UI templates. Although you can build interfaces directly in C# files, Unity recommends using UXML documents in most cases.
• Unity Style Sheets (USS): Style sheets allow you to apply visual styles and behaviors to user interfaces. They are similar to Cascading Style Sheets (CSS) used on the web, and support a subset of standard CSS properties. Although you can apply styles directly in C# files, Unity recommends using USS files in most cases.

UI Tools and resources

The UI toolkit also includes the following tools and resources to help you create UI:

• UI Debugger: The UI debugger (menu: Window > UI Toolkit > Debugger) a diagnostic tool similar to a web browser’s debugging view. Use it to explore a hierarchy of elements and get information about its underlying UXML structure and USS styles.
• UI Builder (package): The UI Builder lets you visually create and edit UI Toolkit assets such as UXML and USS files. The UI Builder package is currently in preview. You can install it from the Package Manager window in the Unity Editor (menu: Window > Package Manager).
• UI Samples: The UI Toolkit includes a library of code samples for UI controls that you can view in the Editor (menu: Window > UI Toolkit > Samples).

• 2019–02–22 Page amended
• 2020–02–19 Page amended
• 2020–06–03 Page amended