Building UI Mock mode
Building UI

Mock mode

Run the UI in a normal browser without Unity by providing mock bridge state, actions, and scenarios.

Mock mode lets you work on UI without entering Unity Play mode. It is ideal for layout, animation, visual states, and designer review.

Why use mock mode

  • Vite reloads quickly.
  • Scenarios make hard-to-reach UI states easy to reproduce.
  • Frontend developers can work without opening Unity.
  • Designers can review flows in a browser.

Configure mocks

Your UI app calls bootBridge during startup. When there is no live Loom connection, provide mock state and action implementations:

ts
bootBridge({
  initial: {
    currentScreen: 'MainMenu',
    playerName: 'Avery',
  },
  mockActions: ({ state }) => ({
    startGame: () => {
      state.currentScreen = 'Loading'
    },
  }),
})

Pass an object when handlers do not change state. Pass a factory, as above, when an action needs mutable mock state or event firing.

Keep mock state close to the real bridge shape. Regenerate types after changing the C# bridge so mocks stay honest.

For a generated LoomImageSource, construct a browser-backed mock explicitly:

ts
import { createMockImageSource } from '@loomgui/bridge'

bootBridge({
  initial: {
    currentScreen: 'Inventory',
    itemIcon: createMockImageSource('/mocks/item-icon.png'),
  },
})

Unity-owned Texture2D, Sprite, and live RenderTexture sources cannot cross into a separate browser process. The helper lets browser-only scenarios use a normal local or remote image instead.

Add scenarios

Use scenarios for common UI states:

ts
bootBridge({
  initial: {
    currentScreen: 'MainMenu',
    health: 100,
  },
  mockScenarios: {
    'Main menu': ({ state }) => { state.currentScreen = 'MainMenu' },
    'Combat HUD': ({ state }) => {
      state.currentScreen = 'Hud'
      state.health = 42
    },
    'Paused': ({ state }) => { state.currentScreen = 'Pause' },
  },
})

Scenarios should describe product states, not implementation details. Good scenario names are the same words a designer or QA tester would use.

When to switch back to Unity

Use Play mode when you need real gameplay data, real actions, scene changes, input integration, or player-build behavior. Mock mode is for speed; Unity is the source of truth.

Loom documentation

Search docs

Esc

Type a word or phrase to search the documentation.

Type a word or phrase to search the documentation.