Bundled multi-HUD demo

The plugin ships a pre-built React multi-HUD app that loads from file:// — no Node, no dev server. This is the same UI shown on the Fab listing screenshot.

What you get

Anchor	Route	What it shows
Player info	player-info	HP / MP / EXP bars, name + level
Minimap	minimap	Terrain + player position + yaw (follows your Pawn)
Chat	chat	Channel tabs + interactive chat (Enter to type, NPC mock reply after 0.8 s)
Skills	skills	10 skill icons (1–9, 0 hotkeys for cooldown sweep)
Keyboard bindings	keyboard-binding	Live log of skill hotkey (1–9 / 0) down/up events with timestamps

Run it

1. Install the plugin via Fab (or copy UnrealReactBridge/ into your project's Plugins/)
2. Edit → Plugins → enable Unreal React Bridge, restart the Editor
3. Open L_MultiHUDDemo (Content Browser → set filter to UnrealReactBridge → Maps/L_MultiHUDDemo)
4. Press Play

You should see the five HUDs anchored at their corners. WASD moves the Pawn and the minimap follows; the React side handles 1–9 / 0 hotkeys for skill cooldown animation.

Where the layout lives

WBP_BundledMultiHUDDemo — one CanvasPanel root (Not Hit-Testable (Self Only)) holding five ReactWebBrowser children. Each child is positioned by its Canvas slot alone: fractional anchors for the box, pixel offsets for the gap from the screen edge. No maths on the graph, nothing to recompute on resize.

Widget · BridgeName	Anchors (min → max)	Offsets	Interactive
PlayerInfo	0.00, 0.00 → 0.32, 0.18	left 16, top 16	no
Minimap	0.78, 0.00 → 1.00, 0.22	top 16, right 16	no
Chat	0.00, 0.68 → 0.24, 1.00	left 16, bottom 16	yes
Skills	0.26, 0.82 → 0.74, 1.00	bottom 16	yes
KeyboardBinding	0.80, 0.72 → 1.00, 1.00	right 16, bottom 16	no

Only Chat and Skills take mouse focus — the other three are read-outs, so bInteractive is off and clicking near them never steals input from the game.

Five browsers under one CanvasPanel is the supported arrangement: a Canvas hands each child its own Slate layer, which is what keeps five native web views from colliding. See Multiple HUDs for what goes wrong under a VerticalBox or Overlay.

The widget exposes one function, ApplyBaseURL(InBaseURL), which loads InBaseURL + "#/<route>" into each of the five browsers.

What the Blueprint does

BP_BundledMultiHUDDemo (a PlayerController under UnrealReactBridge Content/Blueprints/):

• Builds the base URL once in BeginPlay via Get Plugin File URL (UnrealReactBridge + Resources/WebDemo-MultiHUD/index.html), stored in MultiHUDBaseURL
• Creates WBP_BundledMultiHUDDemo, calls Apply Base URL, and adds it to the viewport
• Pushes initial state via React Bridge Sender → Push String / Push Int / Push Bool / Push Raw (player name, level, chat lines, chat open flag)
• Has three React Bridge Receiver components subscribed to ui:skill:click, ui:chat:send, ui:chat:close. ui:chat:send appends the player line to ChatLinesJson, pushes it back to React, then fires a 0.8 s timer that appends a cycled NPC ("Guide", whisper channel) reply — demonstrating the full React → BP → React round-trip

The Pawn (BP_BundledMultiHUDDemoPawn) is a DefaultPawn with its own React Bridge Sender that pushes player:loc (vector) and player:yaw (float) every 0.1 s — that's how the minimap follows the camera, no C++ glue required.

Why HashRouter

The bundled React app loads from a file:// URL. With React Router's BrowserRouter, requesting /skills makes the engine look for a literal skills file on disk and 404 — HashRouter puts the route in the URL fragment (#/skills), so all five anchors load the same index.html and the React side picks the right page.

Looking for the minimal handshake test?

L_OfflineDemo ships a tiny self-contained HTML smoke test — see Offline demo (no Node).