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.

If your project does not have a project-root UI/ directory yet, run Tools > Loom > Setup UI Project first. This creates the Solid starter and installs its dependencies without overwriting an existing UI app.

Loom uses one [Bridge] root. If you imported Getting Started, remove or replace its HelloLoomBridge.cs before adding the bridge below.

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 default function MainMenu() {
  const bridge = useBridge();

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

Show it in Unity

Replace UI/src/App.tsx with the component above. After Unity compiles the C# bridge, run Tools > Loom > Regenerate Types so the UI contract matches it.

Open a URP scene, run Tools > Loom > Setup UI in Current Scene, and save the scene. Enter Play mode, then run Tools > Loom > Doctor while the UI is running. 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.