ReLayer
Open navigation
React UI Framework for Unity

Ship web-powered UIinside Unity.

Build HUDs, menus, live-ops screens, and full-screen overlays with editable React, Vite, HTML, and CSS—connected to Unity through structured events.

View on Unity Asset StoreRead the Quick Start
  • Unity 2022.3+
  • No Unity package dependencies
  • Buyer-owned React source
  • Node.js only for editing and builds
ReLayer / Component ShowcaseRuntime linked
ReLayer React UI component showcase running inside Unity

01 / Workflow

A web UI workflow that stays inside your Unity project.

Your project owns the editable overlay. ReLayer handles Play Mode preview, the Unity bridge, and current production output without replacing your UI on package updates.

  1. STEP 01

    Create the starter

    Open the generated starter scene or add one ReLayer Initializer to an existing scene.

    Assets/ReLayerUser/Scenes
  2. STEP 02

    Edit your React source

    Work in the project-owned template while managed Vite development applies HMR in Play Mode.

    Assets/ReLayerUser/Overlay/Template
  3. STEP 03

    Build the player

    ReLayer creates current production output before Unity writes the player build.

    Assets/StreamingAssets/ReLayer/overlay

02 / Product

Modern UI tools. Unity-owned game state.

Use familiar web conventions for the screens that change most while Unity remains the authority for gameplay, scenes, assets, and player builds.

Own the source

Your editable React/Vite app lives under Assets/ReLayerUser. Package updates do not rewrite it.

Iterate in Play Mode

Auto mode manages an isolated Vite work copy and HMR, with a verified built-overlay fallback.

Connect structured events

Send named events and payloads between C# and React through readable APIs and inspector relays.

Build through Unity

Player builds refresh the active overlay before packaging production output through StreamingAssets.

Reuse working UI pieces

Start with component kits, themes, responsive surfaces, asset access, and camera-render examples.

Preserve gameplay input

Mark interactive React surfaces. Transparent overlay regions remain available to Unity.

ReLayer Showcase running in the Unity Editor

Built-in showcase

Start from a working overlay, then make it yours.

Explore component and theme examples, bridge events, Asset Broker access, Camera Render Broker previews, and portrait and landscape modes. The packaged Showcase runs without Node.js.

See what is included

03 / Live Twin

Inspect and control the UI that is actually running.

Open an interactive browser twin of the active Unity Play Mode WebView. Click, focus, type, select, scroll, use keyboard and pointer actions, hover, drag, and submit forms while the Unity WebView remains the single authority.

  • Works in ordinary browsers and browser tooling
  • Source-aware DOM metadata in Vite development
  • Ordered control from up to eight browser tabs
  • Loopback-only transport with split browser and authority tokens
Read the Live Twin guide
Live Twin / Authority Interactive

Session

play-01 / epoch 4

Authority

Unity WebView

Revision

settled / 184

Transport

127.0.0.1 only

Allowlisted actions

clickfocussetValueselectscrollkeypointerdragsubmit
data-relayer-source="src/components/ShopPanel.tsx:143:9"
Unity → React
ReLayerBridgeManager.GetOrCreate().Send(
  ReLayerBridgeEventType.UnityToUiToast,
  new ReLayerToastPayload {
    title = "Quest complete",
    body = "Reward added."
  }
);
React → Unity
bridge.send('UI_ACTION', {
  action: 'claim-reward',
  questId: 'daily-07'
})

04 / Bridge

Keep game state in Unity. Move the interface with structured events.

Unity sends routes, player state, toasts, and resource results to React. React sends UI actions and requests back through authenticated bridge frames. Use the C# API directly or connect inspector-friendly UnityEvent relays.

Explore the bridge guide

05 / Runtime matrix

Native WebViews for players. Browser DOM for WebGL.

ReLayer reports a missing compatible backend instead of silently presenting an unsupported target as covered.

Windows

WebView2

Windows Editor and x86_64 players. Microsoft Edge WebView2 Runtime required.

Android

Android WebView

API level 21+ with packaged arm64-v8a and x86_64 native libraries.

macOS

WKWebView

Apple Silicon arm64 on macOS 11 or newer.

iOS

WKWebView

arm64 devices on iOS 12+ and arm64 Simulator on Apple Silicon with iOS 14+.

WebGL

Same-document DOM

Browser DOM layer aligned with the Unity canvas. Production requires HTTPS.

Exact support boundaries

Windows ARM64, Intel macOS, Universal macOS players, Intel iOS Simulator, Android 32-bit, and Linux are outside the bundled first-party runtime matrix. WebGL validation covers Unity 2022.3.62f2 IL2CPP with desktop Chrome and Edge.

Read platform requirements
ReLayer portrait showcase running on Android

06 / Documentation

From first import to production output.

Download user guide

Quick Start

First import, starter scene, project-owned source, and the first production build.

Live Twin

Browser control, source-aware inspection, security boundaries, and known limitations.

Unity ↔ React Bridge

Named events, payloads, safe areas, runtime connection checks, and hit testing.

Platforms & WebGL

Runtime requirements, HTTPS, CORS, CSP, and Unity compressed-output headers.

Components & Themes

Stable kit imports, reusable controls, glass surfaces, and project-owned forks.

Troubleshooting

Node toolchains, WebView2, stale builds, input regions, and Live Twin diagnostics.

Product walkthrough

See ReLayer inside the Unity Editor.

Tour the Showcase, component themes, bridge workflow, and the UI running as a Unity overlay.

Start building

Build your next Unity interface with ReLayer.

Get the asset, then begin with a project-owned React/Vite overlay that remains yours to customize.

View on Unity Asset Store Join Discord support