Build your first screen

This walkthrough builds the smallest useful Loom UI: a C# bridge with one piece of state and one action, plus a Solid screen that reads and calls it.

Define a bridge

Create a C# bridge class in your Unity project:

using Loom;

[Bridge]
public partial class UIBridge : LoomBridgeBase
{
    public string Title { get; set; } = "Main Menu";
    public int Clicks { get; set; }

    [BridgeAction]
    public void Click()
    {
        Clicks += 1;
    }
}

Public properties become engine-to-UI state. Methods tagged [BridgeAction] become UI-to-engine actions.

Render the screen

In your UI app, use the bridge from Solid:

import { useBridge } from '@loomgui/bridge';

export function MainMenu() {
  const bridge = useBridge();

  return (
    <main class="screen-fullscreen">
      <h1>{bridge.title}</h1>
      <button onClick={() => bridge.click()}>
        Clicked {bridge.clicks} times
      </button>
    </main>
  );
}

Show it in Unity

Run Loom -> Setup UI in Current Scene if you have not already, then press Play. Loom starts the UI dev server, loads the Solid app, and connects it to the bridge.

Keep going

Next, learn how to structure real UI screens in Screens and routing and how the bridge works in The bridge model.