create-unreal-react-hud CLI

npm package: create-unreal-react-hud. Scaffolds a Vite + TypeScript + unreal-react-bridge SDK project wired up so you can hit Play in UE immediately and see your HUD load.

Usage

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

Aliases:

yarn create unreal-react-hud my-hud
pnpm create unreal-react-hud my-hud

The dev server boots at http://localhost:5173 — point your WBP_WebHUD or Add Web HUD URL at that.

What it generates

my-hud/
├── index.html
├── package.json          ← Vite + React 18 + unreal-react-bridge
├── tsconfig.json
├── vite.config.ts        ← dev server on port 5173
└── src/
    ├── main.tsx          ← <UnrealBridgeProvider> wrapping <App>
    └── App.tsx           ← demo HUD using useUnrealState

File	Role
index.html	Single-page shell; transparent body so HUD renders over gameplay
package.json	Pins React 18, Vite 5, and the unreal-react-bridge SDK
vite.config.ts	Sets server.port = 5173 and React plugin
src/main.tsx	Mounts <UnrealBridgeProvider> around your app root
src/App.tsx	Example HUD using useUnrealState and useUnrealEvent

In Unreal

1. Enable the Unreal React Bridge plugin (Edit → Plugins → search "React").
2. Create a WBP_WebHUD (Widget Blueprint child of WebHUDWidget).
3. Set URL to http://localhost:5173.
4. From a Blueprint, Create Widget + Add to Viewport.

Or use Add Web HUD with the same URL for the Multi-HUD path — see /guide/multi-hud.

TIP

Leave the dev server running while iterating. Vite HMR works inside the UE WebBrowser — edit App.tsx, save, and the HUD updates without restarting PIE.

Source

The CLI source lives at web/cli/ in the main repo. PRs welcome.

See also

• /guide/first-hud — end-to-end walkthrough from npm create to a working HUD in PIE.