Loom Docs
loomgui.com ↗

How Loom fits

A Loom project has two parts that live side by side:

  1. Your Unity project with the onl.snack.loom package installed.
  2. A Vite + Solid UI app, in a UI/ folder inside the Unity project folder root.

The Unity side owns game state, scenes, input, and player builds. The UI side owns markup, styling, layout, animation, and frontend interaction.

Project shape

Most projects end up with this shape:

MyGame/
  Assets/
  Packages/
    manifest.json
  UI/
    package.json
    vite.config.ts
    src/
      index.tsx
      App.tsx
      styles.css

The UI app is a standard frontend project. You can run it with Vite during development, install npm packages, and organize screens and components however your team prefers.

The bridge

The bridge is the contract between Unity and the UI. You define it in C#:

using Loom;

[Bridge]
public partial class UIBridge : LoomBridgeBase
{
    public string CurrentScreen { get; set; } = "Main";

    [BridgeAction]
    public void StartGame()
    {
        CurrentScreen = "Hud";
    }
}

Loom generates matching TypeScript types for the UI:

const bridge = useBridge();

<button onClick={() => bridge.startGame()}>
  Start
</button>

Editor vs player builds

In the Editor, Loom loads your UI from the Vite dev server so changes update quickly. In player builds, Loom loads a production UI bundle from StreamingAssets/Loom; no dev server or Node.js runtime ships with the game.

Where to go next