AUIUI for VRChat worlds

Write a view in an HTML-like file and a small stylesheet. The editor compiles them into a uGUI prefab with generated UdonSharp wiring. Every string is a translation key.

Get started

What AUI is

Element reference

Markup and a stylesheet

A view is an .aui file of nested elements and an .auis stylesheet with classes, states, variables and transitions. Both are checked as you type.

Nothing is parsed in-world

Layout and the cascade are solved in the editor and baked into tables. At runtime the view re-runs those tables in Udon, so it stays cheap.

Translated by default

Every visible string is a key. Players switch language in-game and every live view repaints, with fonts baked for exactly the glyphs your languages use.

Typed code, both directions

Handlers and bindings become real C# members on a generated partial class, so your world scripts talk to a view through properties, not strings.

Changes at runtime

Show and hide elements, add classes, set style values, rewrite the palette, create rows from a pool, open a modal. The solver re-runs; no element is instantiated in-world.

Editor tooling

A language server behind a VS Code extension gives diagnostics, completion for keys and classes, go to definition, rename, quick fixes and a live preview of the generated C#.

A panel built with AUI, running in a VRChat world project

In short

aui

<view name="Hello" width="300" height="140">
  <text key="hello.title" class="title"/>
  <text key="hello.greeting" args="{playerName}"/>
  <panel class="row">
    <spacer/>
    <button onclick="Wave" key="hello.wave" icon="hand"/>
  </panel>
</view>

csharp

public partial class Hello : AuiView
{
    protected override void OnStart()
    {
        PlayerName = Networking.LocalPlayer.displayName;
    }

    public void Wave() { /* ... */ }
}

Save the file. The editor writes Hello.g.cs, scaffolds Hello.cs once, and builds Hello.prefab. Drag the prefab into the scene.

Install it or read what AUI is and is not first.