03 — UI Builder Basics

The UI Builder (Window → UI Toolkit → UI Builder) is the visual editor for UXML and USS. Double-clicking any .uxml file — try the kit's UI/HUD.uxml — opens it there.

The five panels

• Hierarchy (left): the visual tree. Drag to re-nest and reorder elements.
• Library (bottom-left): every element type. Drag Label, Button, Slider, etc. into the Hierarchy or Viewport. The Project tab of the Library shows your own custom controls and templates.
• Viewport (center): live preview. The toolbar's Preview button lets you actually hover/click controls to feel button states.
• Inspector (right): attributes (name, text) at the top, then StyleSheet and inline Styles below.
• StyleSheets (top-left): the .uss files attached to this document, and every selector inside them.

The two habits that separate clean projects from messy ones

1. Name the elements C# will touch. In the Inspector, the Name field is what root.Q<Button>("damage-button") finds. Use kebab-case: score-label, health-bar.
2. Style with classes, not inline styles. Anything you set under Inline Styles is stuck to that one element (like style="" in HTML). Instead, add a Style Class (e.g. btn) in the Inspector's StyleSheet section and define .btn in the USS file. Inline is fine for one-off experiments; classes are for everything real.

Flexbox in 60 seconds

UI Toolkit lays out everything with Flexbox (same as the web, minus a few properties):

• Every element is a flex container. Direction: Column (default — children stack top-to-bottom) or Row (left-to-right). Note the web's default is row, so web tutorials need that one mental flip.
• Justify Content distributes children along the direction axis (start, center, space-between…).
• Align Items positions them on the cross axis.
• Flex Grow = 1 makes an element expand to fill leftover space. The kit's root container uses this to fill the screen.
• Position: Absolute opts an element out of flex flow — use sparingly (tooltips, floating markers).

Play with Flexbox Froggy for ten minutes if this is new; it maps 1:1 onto UI Toolkit.

Try it now

1. Open UI/HUD.uxml in UI Builder.
2. Click button-row in the Hierarchy and change Justify Content to space-between. Watch the buttons spread.
3. Undo (Ctrl+Z), then enable Preview and hover the buttons to see the :hover styles from 05 - Styling and Button States in action.

Next: 04 - Building the HUD