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.

What the Blueprint does

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

• Builds the URL once via Get Bundled Demo URL + a string Replace (Resources/WebDemo/ → Resources/WebDemo-MultiHUD/), stored in the MultiHUDBaseURL variable
• Calls Add Web HUD 5 times in BeginPlay, each URL = MultiHUDBaseURL + "#/<route>"
• 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).