Your first React HUD

Five minutes from empty project to a React HUD on screen.

Prerequisites

You've already installed the plugin and verified it with the offline demo. You have Node 18+ and a Vite dev server running at http://localhost:5173 — the fastest way is npm create unreal-react-hud@latest my-hud && cd my-hud && pnpm install && pnpm dev (see dev-server). If you just want to confirm the plugin works in your project, stop here — the offline demo is the right page.

Step 1 — Create the HUD widget

1. Content Browser → right-click → User Interface → Widget Blueprint. When prompted for the parent class, pick WebHUDWidget. Name the asset WBP_MyHUD.
2. Open WBP_MyHUD. In the Designer, drag a Bindable Web Browser widget onto the root.
3. Rename that widget to exactly WebBrowser. The bridge looks it up by widget name; case matters.
4. Open Class Defaults and set URL to http://localhost:5173. Leave Bridge Name empty for now — the default channel is fine.

WBP_MyHUD (parent: WebHUDWidget)
└── WebBrowser  ← Bindable Web Browser widget (name MUST be "WebBrowser")

Widget name is load-bearing

WebHUDWidget finds its browser child by the literal name WebBrowser. Typos (Webbrowser, WebBrowser_1) silently break the bridge.

Step 2 — Add it to the viewport

In your Level Blueprint (or HUD / GameMode of choice), on Event BeginPlay:

1. Create Widget → set Class to WBP_MyHUD. Store the return value.
2. Add to Viewport on that return value.

Event BeginPlay
  └─ Create Widget (Class: WBP_MyHUD)
        └─ Add to Viewport

Alternative — one-node Multi-HUD

If you want multiple HUDs at named screen positions (top-left, center, bottom-right, …), skip the WBP entirely and use the Add Web HUD node instead. See Multi-HUD at named anchors.

Step 3 — Play In Editor

1. Make sure your dev server is running at http://localhost:5173. If you do not have one yet, follow Start the React dev server.
2. Press Play. Your React app renders inside the viewport.

If you see a blank rectangle instead of your UI, see Troubleshooting & FAQ — the usual culprits are the widget name, the dev server URL, and CORS on packaged URLs.

Next

• Start the React dev server — scaffold a project or run an example.
• Multi-HUD at named anchors — one BP node per HUD layer.