Version: 2020.1
Comparison of UI systems in Unity
The UI Toolkit Package

UI Toolkit

Unity’s UI 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.

NOTE:
Although Unity recommends using UI Toolkit for some new UI development projects, it is still missing features found in Unity UI (uGUI) and IMGUI. These older systems are more appropriate for certain use cases, and are required to support legacy projects. For information about when it is appropriate to choose an older system instead of the UI Toolkit, see the Comparison of UI systems in Unity.

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 System: 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 rendering 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
Comparison of UI systems in Unity
The UI Toolkit Package