From first import to a production overlay.

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.

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

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")

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.

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.

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.

Player builds rebuild the active overlay before the Unity build starts, regardless of the Editor Play Mode source. Use the manual helper only when you intentionally need production output outside a player build.

Assets/ReLayer/Core/Build/build-overlay.ps1

# Optional: omit bundled example themes
Assets/ReLayer/Core/Build/build-overlay.ps1 -ExcludeExampleThemes

The packaged Showcase is isolated at Assets/StreamingAssets/ReLayer/showcase. User scenes load the project output at Assets/StreamingAssets/ReLayer/overlay.