⚛️
Ship React, not Slate
Hooks, components, DevTools, your CSS stack — anchor as many independent HUD layers as you need.
UnrealReactBridgeBuild your game UI in React.
Multi-layer HUDs wired to real gameplay in Unreal Engine 5.7+.
Skip to content
See it in action
Four React HUDs over live UE5 gameplay — one Blueprint node per layer.
From install to HUD on screen — 3 steps
- Install from Fab → Add to Project, restart the editor.
- Open
Content/Maps/L_OfflineDemo(Content Browser → Show Plugin Content → UnrealReactBridge). - Press Play — the demo HUD renders with zero Node setup.
➡️ Ready for the React + Vite flow? See Your first React HUD or Multi-HUD anchors.
Two channels: events and keyboard
After the demo runs, everything you build uses one of two channels.
Custom events — bidirectional state & UI signals
text
BP → React React → BP
───────────────────── ──────────────────────
ReactBridgeSender useUnrealBridge().send(
PushFloat("player:hp", 75) 'ui:reload', { ammo: 15 }
)
│
useUnrealState<number>( ▼
'player:hp', 100 ReactBridgeReceiver
) EventName: 'ui:reload'
OnReceived(JsonData)➡️ Push data to React · Receive UI events in BP
Custom keyboard — UE-owned input, React-consumed
text
BP (Enhanced Input IA_Q) React (any HUD)
──────────────────────── ──────────────────────
SendKeyToWeb( useUnrealKeybinding(
EReactKey::Q, ReactKey.Q,
EReactKeyType::Down (type) => { ... }
) )The plugin owns no input listener — your BP decides when a key fires. Typed enum on both ends, no string magic.