ENGAWAUI · UNREAL ENGINE

Build UI with HTML, CSS, and JavaScript

Render HTML projects inside Unreal through EngawaRuntime, present them through UMG, forward mouse and keyboard input, and exchange structured events with Blueprints.

Getting Started Browse the Blueprints

Human Statement

Markdown is generated by AI. That said I make sure to go step by step through the documentation to make sure it is accurate. However, as I am human I also make mistakes, if you notice anything please open an issue in the repo. - Dill

What you can build

Web-powered screens

Use modern HTML, CSS, and JavaScript for menus, HUDs, inventories, terminals, and other interactive interfaces.

Native UMG presentation

Display the browser texture with the Engawa UI widget inside a normal Canvas Panel, including sizing, focus, pointer input, and transparent pass-through.

Two-way events

Send JSON values in both directions with the raw page bridge, named EngawaUI events, or typed Unreal Gameplay Tag events.

Tunable presentation

Choose Auto, CPU, or GPU (Accelerated), set a 1–240 FPS output ceiling, follow the current monitor refresh rate, and inspect completed UI FPS.

The shortest path to a working screen

1. Copy the packaged plugin folder into <YourProject>/Plugins/EngawaUI/.
2. Enable EngawaUI and restart Unreal Editor.
3. Create an index.html file and import it into the Content Browser.
4. Assign that imported EngawaUI Web File to an Engawa UI Component.
5. Put an Engawa UI widget inside a full-screen Canvas Panel.
6. Connect the widget to the component, create the screen widget, and add it to the viewport.

The Getting started tutorial walks through every click, expected result, and Blueprint connection.

Local content only

EngawaUI does not open public web addresses. It accepts imported web assets and immutable local engawa://bundle/ content. Remote http, https, file, data, and arbitrary URL schemes are rejected.

Choose a guide

I want to…	Start here
See HTML on screen for the first time	Getting started
Understand imported HTML and packaged resources	Web assets and local content
Connect JavaScript and Blueprints	JavaScript bridge
Use friendly named events	EngawaUI Event component
Use typed event names from Unreal	Gameplay Tag events
Make a menu open and close correctly	Show and hide a menu
Tune sharpness, DPI, FPS, or rendering	Sizing and DPI and performance
Prepare a Shipping build	Cooking and packaging
Diagnose a blank or non-interactive UI	Troubleshooting

How EngawaUI is divided

• The Engawa UI Component owns the EngawaRuntime-backed web view, loads content, exposes the texture, and publishes Blueprint events.
• The Engawa UI UMG widget draws that texture and forwards UMG/Slate input.
• An EngawaUI Web File is Unreal's imported, cookable link to the HTML entry file and its supported sibling resources.
• The optional EngawaUI Event components add named JSON or Gameplay Tag messaging on top of the raw bridge.

These pieces are deliberately separate. Once that mental model clicks, the rest of the plugin becomes pleasantly straightforward.