# User interface

!!! note "Summary"
    Visual Script connects Events and Signals to Unity's **uGUI** and **UI Toolkit** systems. Bind displayed state to change Triggers, and use interaction Triggers to run logic when the player edits or activates a control.

## The pattern

Connect UI controls to game state in two directions:

* **Displaying** state is a [binding](../signals/bindings.md): watch a value, update the element when it changes.
* **Interacting** is a Trigger: the button is pressed, an Event runs, the value changes.

Both directions use the same value. For example, an Event changes the score and a binding updates its label, so the Event doesn't need a reference to the label.

You can use this pattern with either UI system; each provides different ways to build and configure the controls.

!!! tip "Bindings update UI when values change"
    An **On Update** Event writes a label every frame, even when its value hasn't changed. Use **On Number Change** with **initial emit** enabled to set the label at startup and update it when the value changes.

## The two systems

Unity ships two UI systems, and Visual Script integrates with both:

| Capability | **[uGUI](ugui.md)** | **[UI Toolkit](ui-toolkit.md)** |
| :--- | :--- | :--- |
| **Layout** | Rect transforms and anchors | Flexbox, USS |
| **World-space UI** | Yes | Limited |
| **Visual Script works through** | The components you already have | Runtime elements that run Instructions |

They can coexist in one project. Select a system per screen; for example, use uGUI for a world-space health bar and UI Toolkit for a settings menu.

## Where to go next

<div class="grid cards" markdown>

- **[uGUI](ugui.md)** — connect text, controls, generated lists, and world-space canvases.
- **[UI Toolkit](ui-toolkit.md)** — run Instructions and bind values from UXML elements.
- **[Bindings](../signals/bindings.md)** — update displayed state when a Signal changes.
- **[Collections](../signals/collections.md)** — provide the data behind generated lists.

</div>