Documentation

Open the starter and press Play.

First import creates a small project-owned starter, editable React source, and matching built overlay. ReLayer Studio opens after successful setup.

1. 1

   Open Starter Scene

   Open Tools/ReLayer/Open Studio, then choose Open Starter Scene. Your scene remains yours.

2. 2

   Press Play

   The default Auto source starts managed Vite development and HMR for the project-owned template.

3. 3

   Edit the app

   Change Assets/ReLayerUser/Overlay/Template/src/App.tsx and src/styles.css.

4. 4

   Build normally

   Unity player builds refresh the production overlay before writing the player.

A React workspace, built with ReLayer.

Open Tools > ReLayer > Open Studio. Choose a delivery mode, enter its required values, then validate and build. The interface shares this website's branding, while Unity owns your settings and operations.

The target bar identifies the Initializer and its actual settings owner. A single target is automatic; multiple targets require a choice. Clicking another Unity object does not retarget your work. Text commits on blur or Enter, invalid values stay unsaved, Undo/Redo remains native, and switching modes preserves every mode's saved values.

Studio's packaged page opens without internet, Node.js, or your game's development server. Editing or rebuilding the game UI still needs its normal toolchain. Builds stay local; a finished build is not a CDN publication or player-runtime test. Closing Studio does not cancel a build, and script-reload interruptions are never automatically replayed.

Keep custom UI outside the imported package.

ReLayer separates imported package code, buyer-owned source, generated production output, and isolated working files. Asset Store reimports update the package while preserving your app.

Do not run npm install inside the Unity template folder. ReLayer installs dependencies in its isolated work copy so Unity never imports node_modules.

Choose the right Play Mode source.

After installing Node.js or changing the toolchain, set RELAYER_NPM_PATH when needed, then choose Tools/ReLayer/Restart Overlay Session.

If the preview stays blank, open Studio > Diagnostics through Tools/ReLayer/Preview Status. If Studio itself cannot load, use Tools/ReLayer/Recovery for native failure details and actions. Startup retries are limited to three attempts, 20 seconds apart, and wait through compilation or Play Mode transitions. Exit Play Mode before using Retry / Restart Preview or Tools/ReLayer/Rebuild Overlay. Automatic preview checks do not install dependencies or rebuild the app; an explicit rebuild runs asynchronously and preserves the published output until validation succeeds.

Control the authoritative Play Mode DOM from a browser.

Choose Tools/ReLayer/Live Twin/Open. ReLayer opens a tokenized loopback page that mirrors the actual WebView owned by Unity; it does not run a second React app or add another bridge client.

const status = await window.__RELAYER_LIVE_TWIN_V1__.getStatus()
await window.__RELAYER_LIVE_TWIN_V1__.click(mirrorElement)
await window.__RELAYER_LIVE_TWIN_V1__.setValue(mirrorInput, "Pilot")

Send named events in both directions.

Unity remains authoritative for game state. React renders UI and sends explicit actions back. Mark interactive React surfaces with data-relayer-hit so transparent areas keep normal Unity input.

Unity → React

ReLayerBridgeManager.GetOrCreate().Send(
    ReLayerBridgeEventType.UnityToUiToast,
    new ReLayerToastPayload
    {
        title = "Unity event received",
        body = "Sent from Unity."
    });

React → Unity

<button
  data-relayer-hit
  onClick={() => bridge.send('UI_ACTION', { action: 'pause' })}
>
  Pause
</button>

Use hasUnityRuntimeConnection() for Play-only loading gates and state requests. A native WebView callback alone can also exist for an Edit Mode visual preview.

Reuse package-owned components without giving up your app.

New templates import maintained kits through the stable #relayer/* namespace. Package updates can improve those kits while your application and styles remain in Assets/ReLayerUser.

import { Button, Card, TextField } from '#relayer/components'
import { GlassButton, GlassPanel, GlassRoot } from '#relayer/glass'
import { getComponentTheme } from '#relayer/themes'

const theme = getComponentTheme('edge')

Create a project-owned fork only when you need to edit kit internals. Forked files stay yours and are not updated by later package imports.

Use the exact first-party runtime matrix.

Update player UI through one Initializer.

Existing projects remain on StreamingAssets. Open Studio > UI Delivery, choose Bundled, Addressables, Hosted, Local, or Custom, run the tab's validation, then use its setup or build action. The old UI Delivery menu still opens this page. Switching tabs preserves every mode's values. ReLayer creates the manifest and content-derived version; you do not maintain release.json or version numbers by hand.

Follow the English setup walkthrough with real AWS Console screenshot cards and generic examples. Ship the loader in a player once before UI-only updates. Hot updates are not officially supported on WebGL.

Hosted setup

1. 1. Select Hosted and enter the public HTTPS deployment directory.
2. 2. Build the UI update, upload its immutable releases/<version>/ files, verify them, then publish release.json last.
3. 3. ReLayer checks at startup and every 30 seconds while foregrounded. Detection keeps the current document visible.
4. 4. Hide and reopen the full ReLayer view, or call the shared apply API at a game-owned safe point.

await initializer.ApplyPreparedPlayerOverlayAsync()

Replacement waits for authenticated document boot, content version, React READY, and your optional Unity state restore hook. Commands from the old document and gameplay or purchase commands received during activation are discarded rather than replayed. A failed Hosted activation falls back to the built-in UI. Hosted does not promise an offline copy of the last website; choose Addressables when that requirement matters.

Addressables and custom updaters

Choose an Addressables release compatible with your Editor. Windows-tested pairs are Unity 2022.3.62f2 / Addressables 1.21.19 and Unity 6000.5.2f1 / Addressables 2.10.3; 1.21.19 cannot compile on Unity 6000.5. Keep the deployed player's Editor, Addressables version, and content-state baseline when publishing UI-only updates.

ReLayer creates or reuses only its dedicated group and key. It does not rewrite existing remote profiles or update the global catalog itself. If your game owns catalog updates, select Update control = Project and call InitializePlayerOverlayAsync() once after that updater completes. Later checks use PreparePlayerOverlayAsync() and the same apply API.

For a custom startup flow, use ShowBuiltInPlayerOverlayAsync() for the packaged shell, set a release key before initialization, or call ActivateLastGoodPlayerOverlayAsync() for a verified local UI. During state restoration, PlayerOverlayRestoreVersion identifies the document receiving the snapshot, including rollback. Separate media packs use ReLayerContentPackInstaller for verified installation.

A proprietary delivery client can implement IReLayerPlayerContentProvider and register one stable provider ID before the Initializer starts. The provider returns the generated overlay.bytes archive only; ReLayer still validates release.json, file hashes and compatibility, installs atomically, and owns safe application and rollback. It cannot bypass the Hosted trust boundary by returning a WebView URL.

Editor HMR stays the default. Enable Test player delivery in Play Mode before Play Mode when testing this loader. Otherwise, the Inspector explains that the normal preview is active and hides inactive update controls.

Serve the player and overlay over HTTPS.

WebGL imports the overlay into a ReLayer-owned DOM layer aligned with the Unity canvas. Keep the player page, Build files, and StreamingAssets/ReLayer content on the same origin when possible.

• Production requires HTTPS; file:// is unsupported and plain HTTP is loopback-development only.
• Split origins need CORS for overlay HTML, modules, CSS, fonts, images, and media.
• CSP must allow Unity/WASM plus ReLayer connections, styles, assets, and blob: module URLs.
• Use a CSP nonce ReLayer can copy, or explicitly allow the required inline import maps and scoped styles.