Start the React dev server

Your HUD is a normal Vite project. Pick a starting point: scaffold a fresh one, or run one of the bundled examples.

Path A — Scaffold a new project (recommended)

npm create unreal-react-hud@latest my-hud
cd my-hud
pnpm install
pnpm dev

The scaffolder produces a Vite + TypeScript project with the unreal-react-bridge SDK already wired through UnrealBridgeProvider. You get a working useUnrealState example, the devtools panel, and the ready handshake out of the box.

• CLI source: web/cli/ in the plugin source tree.
• npm: https://www.npmjs.com/package/create-unreal-react-hud.

Why a scaffolder

The boilerplate is small but easy to typo (provider order, channel name, ready-event listener). Scaffolding skips a class of "why is nothing arriving" bugs.

Path B — Run an example from this repo

cd web/sdk/examples/multi-hud
pnpm install
pnpm dev

Five runnable examples live under web/sdk/examples/:

Example	What it shows
bridge-smoke-test	Smallest possible handshake — use it to prove the bridge is alive
basic-hud	Minimal useUnrealState + a single push from BP
chat-system	Chat-mode focus toggle (Enter / Esc)
game-menu	Pause menu pattern with route navigation
multi-hud	Five browsers on one canvas, each on its own route

Each example ships its own pnpm dev script and serves on http://localhost:5173 by default.

Configure the URL in UE

The dev server URL is read from one of two places, in order:

• Per-browser override. Select the React Web Browser in the Designer → Details → set URL. This wins whenever it is non-empty.
• Project-wide default. Project Settings → Plugins → Unreal React Bridge → Default Dev URL. Used when a browser's URL is empty.

For the full list of settings (queue size, devtools, logging), see Project Settings.