Offline demo (no Node required)

The plugin ships a self-contained HTML demo under Resources/WebDemo/. Open one map, press Play, and you can verify the entire bridge in 30 seconds — no Vite, no npm install, no Node at all.

Open the map

1. Enable Unreal React Bridge in your project (Edit → Plugins → Web → Unreal React Bridge).
2. In the Content Browser, set the plugin filter to UnrealReactBridge and open Maps/L_OfflineDemo.
3. Press Play.

What you'll see

A dark HUD card with three panels stacked vertically:

Panel	What it proves
Bridge status — green dot, connected · v1	ue5-bridge-ready fired; window.ue.bridge is bound
UE → Web — HP number ticking once a second	BP_BundledOfflineDemo pushes player:hp events; the HTML's addEventListener('player:hp', …) receives them
Web → UE — Send ping / Use potion buttons	Clicking calls window.ue.bridge.onreactevent(…); UE's OnEventReceived fires; you can see the event in the Output Log

When to use this vs. the dev server

	Offline demo	Dev server
Toolchain	None	Node 18+, pnpm, Vite
Edit-reload loop	No	Yes — Vite HMR
Stack used	Vanilla HTML / JS	React + SDK + your CSS
Use case	First-look, Fab review, "does this work in my project at all?"	Daily development

See Start the React dev server once you're ready to build your own HUDs.

Want the full multi-HUD demo instead?

L_OfflineDemo is the 30-second smoke test. For the buyer-facing HUD shown on the Fab listing (HP / minimap / skill bar / chat / keybindings), see Bundled multi-HUD demo.

How it works under the hood

There is no C++ in this demo — it is exactly what the guide tells you to build, and you can open every part of it.

WBP_BundledOfflineDemo is a Widget Blueprint: a CanvasPanel root with one ReactWebBrowser child, its slot given stretch anchors so the card stays centred at 32% × 48% of the viewport at any resolution. It exposes one function, ApplyDemoURL(InURL), which forwards to the browser's LoadReactURL.

BP_BundledOfflineDemo is an Actor placed in the level. On BeginPlay it:

1. Calls Get Plugin File URL with UnrealReactBridge + Resources/WebDemo/index.html — the plugin's install location is resolved at runtime, so no absolute path is baked into the asset
2. Creates WBP_BundledOfflineDemo, passes that URL to ApplyDemoURL, and adds it to the viewport
3. Starts a 1 s looping timer that pushes a random player:hp through its ReactBridgeSender

The HTML uses the documented Bridge Protocol v1 directly — no React, no SDK, no external dependencies.

Editor-only by design

Resources/WebDemo/ is not listed in the plugin's Config/FilterPlugin.ini, so it is not copied into packaged builds — this map is a smoke test, not a shipping example. For a shipped HUD, package your React build under Content/Web/ and load it via a file:/// URL relative to the project, or serve it from an embedded HTTP server.