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 → User Widget. Name the asset WBP_MyHUD.
2. Open WBP_MyHUD. In the Designer, drag a Canvas Panel from the Palette into the empty Hierarchy so it becomes the root. (Every browser must be a direct child of a CanvasPanel — see Multi-HUD for why.)
3. Select that Canvas Panel and set its Visibility to Not Hit-Testable (Self Only) in Details. It fills the viewport, so leaving it hit-testable makes it swallow every mouse click and your game stops responding. Self Only exempts the panel itself while keeping its children clickable — do not pick Self & All Children, which would also make your browser unclickable. (In C++ these are SelfHitTestInvisible and HitTestInvisible.)
4. Drag a React Web Browser widget from the Palette onto that canvas.
5. Open Details (with the browser selected) and set URL to http://localhost:5173. Leave Bridge Name empty for now — the default channel is fine.

WBP_MyHUD
└── CanvasPanel (root, Not Hit-Testable (Self Only))
    └── ReactWebBrowser  ← React Web Browser widget

There is no parent class to inherit for the browser itself and no child widget name to get right — React Web Browser is a single self-contained widget you can drag into any Widget Blueprint.

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

Multiple HUDs at once?

Drop more than one React Web Browser onto the same CanvasPanel and position each with the CanvasPanel's anchor presets. See Multi-HUD at named anchors — there's one constraint to know before you do (LayerId collisions on macOS).

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 URL field, the dev server not running, and CORS on packaged URLs.

Next

• Start the React dev server — scaffold a project or run an example.
• Multi-HUD at named anchors — multiple browsers, one CanvasPanel.