UI Toolkit without manual bindings

Unity UI Toolkit is powerful, but everyday screens still mean boilerplate: UXML trees, C# Q<> lookups, manual bindings, and an MVVM-shaped pile of callbacks. Search queries look like unity uitoolkit binding boilerplate, unity ui toolkit mvvm, uitoolkit data binding — not “Vue-like framework”.

SUS answers that pain: one .sharq file, reactive Prop / Computed / Watch, no manual bindings for the same UI.

Side by side

Same counter: label + button. First — plain UI Toolkit (UXML + C# with hand-wired data binding). Then — the same screen as a .sharq SFC.

Plain UI Toolkit — UXML + C#

<!-- Counter.uxml -->
<ui:UXML xmlns:ui="UnityEngine.UIElements">
  <ui:VisualElement class="counter">
    <ui:Label name="value-label" text="0" class="counter__value" />
    <ui:Button name="inc-button" text="+1" />
  </ui:VisualElement>
</ui:UXML>

// CounterView.cs — manual bindings / MVVM-ish glue
using UnityEngine;
using UnityEngine.UIElements;

public class CounterView : MonoBehaviour
{
    [SerializeField] UIDocument document;

    Label _valueLabel;
    Button _incButton;
    int _count;

    void OnEnable()
    {
        var root = document.rootVisualElement;
        _valueLabel = root.Q<Label>("value-label");
        _incButton = root.Q<Button>("inc-button");

        // Manual subscription — easy to forget on disable / rebuild
        _incButton.clicked += OnInc;
        Refresh();
    }

    void OnDisable()
    {
        if (_incButton != null)
            _incButton.clicked -= OnInc;
    }

    void OnInc()
    {
        _count++;
        Refresh(); // hand-pushed data binding
    }

    void Refresh()
    {
        if (_valueLabel != null)
            _valueLabel.text = _count.ToString();
    }
}

SUS — .sharq (no manual bindings)

<!-- Counter.sharq -->
<template>
  <ui:VisualElement $MainElement class="counter">
    <ui:Label :text="Count" class="counter__value" />
    <ui:Button text="+1" @click="OnInc" />
  </ui:VisualElement>
</template>

<script>
public Prop<int> Count = new(0);
private void OnInc() => Count.Value++;
</script>

<style>
.counter { flex-direction: row; align-items: center; }
.counter__value { font-size: 24px; margin-right: 12px; }
</style>

Change Count.Value — the label updates. No Q<>, no clicked +=, no Refresh() for this screen’s data binding.

What you stop writing

Pain (search terms)	Plain UI Toolkit	With SUS
boilerplate	UXML + MonoBehaviour + lookup + subscribe	One .sharq
manual bindings	Q<> + callbacks + text = …	:text / @click on Prop
MVVM / view-models for every screen	Often required by hand	Reactive sources in the component
data binding glue	Rebuilt on every field	Built-in Prop / Computed / Watch

Editor compile turns .sharq into ordinary [UxmlElement] partial class + USS — UI Builder and the debugger still see normal C#.

Next

• Getting started — install free Core + Router
• .sharq format · Reactivity
• Full guide: Quickstart · Reactivity