Install and run Loom

You’ll set up Loom in a Unity project and connect a button in the UI to your C# code. By the end, you’ll have a screen running in the Game view, and you’ll be able to edit it while the game is running.

Before you start

Start with a Unity URP project that doesn’t already use Loom. You’ll need:

Loom uses npm to install the UI’s dependencies. To check which versions of Node.js and npm you have installed, open a terminal and run:

node --version
npm --version

For the full list of supported tools and platforms, see Supported platforms.

Install the Unity package

Open Window > Package Management > Package Manager in Unity, then select My Assets. Sign in with the account that owns Loom GUI, select Loom GUI, and click Install.

Once Unity finishes installing the package and compiling C#, you’ll find the setup commands under Tools > Loom.

If your studio received an onl.snack.loom-X.Y.Z.tgz archive from Snack, select Install package from tarball from Package Manager’s + menu and choose the archive.

Create the UI app

First, let’s create the UI that we’ll connect to the game. Run Tools > Loom > Setup UI Project and wait for the Unity Console to report that npm installation completed.

This creates a UI/ folder beside Assets/ with a Solid starter app. The starter displays a message and a Ping the engine button. We’ll write the C# code for that message and button next.

Add the C# bridge

To connect the screen to Unity, we need a bridge: a C# class containing the values the UI can read and the methods it can call. We’ll give it a Message property for the text on screen and a Ping() method for the button.

Create Assets/Scripts/UIBridge.cs with the following contents:

using Loom;

[Bridge]
public partial class UIBridge : LoomBridgeBase
{
    private int _pingCount;

    public string Message { get; set; } = "Hello from Unity.";

    [BridgeAction]
    public void Ping()
    {
        _pingCount += 1;
        Message = $"Pong from Unity ({_pingCount}).";
    }
}

The [Bridge] attribute makes this class available to Loom. The starter reads Message to display its text, and calls Ping() when you click the button. Marking Ping() with [BridgeAction] allows that call from the UI. Each click increments _pingCount and puts the new count into the message.

Save the file and wait for Unity to compile. Loom automatically generates the TypeScript declarations for your bridge in UI/generated/. When you change the bridge later, make those changes in C# and Loom updates the generated files for you.

Your project now has the C# bridge and the UI app:

MyGame/
  Assets/
    Scripts/
      UIBridge.cs
  Packages/
  UI/
    package.json
    src/
      App.tsx       # The screen
      bridge.ts     # Bridge startup and browser mocks
      index.tsx     # App startup
      styles.css
    generated/      # Bridge contract generated from C#

To work on the UI files, open the project-root UI/ folder in your code editor. The C# files stay under Assets/, where Unity compiles them.

Set up the scene

Now we can display the UI in the game. Open the URP scene you want to use, run Tools > Loom > Setup UI in Current Scene, and save it.

The setup command adds a Loom UI GameObject and configures the URP renderers to draw the UI over the Game view.

Test the button

Enter Play mode and wait for the screen to appear. You’ll see Hello from Unity., the value you assigned to Message.

Click Ping the engine. The text changes to Pong from Unity (1). Click again and the count becomes 2. Each click calls your C# method, and the change to Message appears in the UI.

With the game still running, open Tools > Loom > Doctor and confirm that all required checks pass. Doctor checks the setup, generated files, and running dev server. The Firefox check is optional; Firefox is used for DevTools. If a check fails, follow the corresponding instructions in Loom Doctor.

Explore the working screen

Let’s change the button’s label. Open UI/src/App.tsx, find Ping the engine, and change it to Send a ping. Save the file while Play is running. The button text updates in the Game view without restarting Play.

You can keep editing the screen this way. Use UI/src/App.tsx for its content and UI/src/styles.css for its appearance. When you’re ready to change what the UI reads from or calls in C#, return to Assets/Scripts/UIBridge.cs.

Continue with Build your first screen to turn the message and button into a click counter, or read Development workflow to work on the UI in a browser.

If setup fails