Skip to content
Loom Docs

Your first screen

This page assumes you’ve already installed the Unity package and have a <ProjectRoot>/UI/ folder with a package.json.

  1. Define the bridge in C#.

    Create a new C# file in your game’s Assets/Scripts/UI/:

    Assets/Scripts/UI/GameBridge.cs
    using Loom;
    

    [Bridge]
    public partial class GameBridge {
      [BridgeState] public Observable<int> Score { get; } = new(0);
      [BridgeAction] public void AddPoint() { Score.Value += 1; }
    }

    The [Bridge] attribute triggers the source generator. After the next Unity compile, Loom → Regenerate Types (run from the Editor menu) emits the matching TypeScript types to UI/src/bridge.d.ts.

  2. Register the bridge on Play.

    In your bootstrap MonoBehaviour (typically LoomBootstrap or a subclass), add the bridge before LoomRuntime.Initialize():

    var bridge = new GameBridge();
    bridge.RegisterWithLoom();

  3. Use the bridge from your UI.

    In your Solid app:

    C#
    [BridgeState]
    public Observable<int> Score { get; } = new(0);
    

    [BridgeAction]
    public void AddPoint() {
      Score.Value += 1;
    }
    TS
    import { useBridge } from '@loomgui/bridge'
    

    export default function Score() {
      const bridge = useBridge()
      return (
        <>
          <span>{bridge.state.score}</span>
          <button onClick={() => bridge.actions.addPoint()}>
            +1
          </button>
        </>
      )
    }

  4. Hit Play. Click the +1 button — bridge.actions.addPoint() reaches C#, Score.Value bumps, and the UI re-renders with the new value.

Where to go next