01 — What Is UI Toolkit
UI Toolkit is Unity's modern UI system, and in Unity 6 it is the recommended way to build both runtime game UI and editor tools. If you have ever touched web development, it will feel familiar immediately, because it deliberately borrows the web's separation of concerns.
The three ingredients
| Web | UI Toolkit | Job |
|---|---|---|
| HTML | UXML (.uxml) | Structure — what elements exist and how they nest |
| CSS | USS (.uss) | Style — colors, sizes, layout rules, hover/press states |
| JavaScript | C# | Behavior — respond to clicks, update text and values |
A VisualElement is the basic building block (like a <div>). Everything on screen — labels, buttons, sliders — is a VisualElement arranged in a tree called the visual tree.
How it compares to what you may know
- uGUI (Canvas/RectTransform): the older runtime system. Every text box is a GameObject in the scene. Still supported, still fine for world-space UI (health bars floating over enemies' heads), but UI Toolkit lays out complex screens faster, styles them centrally, and performs better with lots of elements.
- IMGUI (
OnGUI): legacy, code-only. Avoid for new work.
Rule of thumb in Unity 6: screen UI → UI Toolkit; world-space/VR UI → uGUI (although UI Toolkit's world-space support arrived in Unity 6.2 and is maturing — check current docs. See Unity's comparison of UI systems).
The runtime pieces you'll meet in 02 - Project Setup and Settings
- UIDocument — a component on a GameObject that says "render this UXML file".
- PanelSettings — an asset that controls how it renders: scaling, sort order, theme.
- Theme (.tss) — the default look for all controls (so buttons look like buttons before you style anything).
Why teachers and studios like it
One stylesheet can restyle an entire game. Layouts scale to any resolution via Flexbox. Designers work in a visual editor (UI Builder) while programmers write clean C# that just queries elements by name — the same division of labor as the web.