How it works

A React HUD reaches the screen in four stages. Each stage is a real boundary you can debug in isolation.

The pipeline

1. Blueprint mounts the widget. You drag a React Web Browser into a Widget Blueprint's CanvasPanel and position it with ordinary slot anchors, then Create Widget + Add to Viewport from Blueprint. One canvas can hold as many browsers as you need.
2. CEF loads your URL. The widget hosts a Chromium Embedded Framework (CEF) browser. It navigates to your dev server (default http://localhost:5173) or the packaged URL configured per-widget.
3. The bridge injects the JS surface. Before your bundle runs, the plugin injects window.ue.bridge and dispatches a ue5-bridge-ready CustomEvent on window. The React SDK's UnrealBridgeProvider listens for this event.
4. React signals ready, events flow both ways. The SDK calls window.ue.bridge.onreactready(). From that moment, BP pushes (PushFloat, PushString, …) arrive as typed React state, and React emits events that surface as BP OnReactEvent dispatchers.

The ready queue

Events sent by UE before React calls onreactready are buffered, then flushed in order once the handshake completes. The default queue size is 100 events and is configurable in Project Settings → Plugins → Unreal React Bridge.

Why this matters

You can call PushFloat("Health", 100) from Event BeginPlay without racing the browser boot — the value lands the moment React mounts.

Where to go deeper

• Wire-level event shapes, channel naming, and version negotiation: Bridge Protocol v1.
• The widget's full property / method / event surface: UReactWebBrowser.
• React-side hooks and provider: UnrealBridgeProvider.