Hi everyone,
I’ve been working on Mako UI: you write your game’s UI in HTML, CSS and JavaScript, and Unreal renders it natively as a draw command list. The Unreal version is built for Unreal Engine
5.8, and it’s still a work in progress, so take this as an early look rather than a launch:
In the video, the FPS, racing and exploration demos run in Unreal Engine 5 with Mako UI HUDs (the explorer’s journal is a CSS 3D book). A few full-screen shots come from my demos in other engines, because the same HTML runs in all of them.
How it works in Unreal
-
It isn’t a browser: no Chromium, no WebView. A native C++ runtime lays out the HTML and CSS, runs the JS, and hands a draw list to Unreal, which draws every pixel. Think of a lightweight, GPU-friendly web runtime that follows the modern web specs, not a basic HTML subset (Grid, container queries, CSS 3D, Web Animations, WebGL/WebGPU, ES modules, Workers and more).
-
You add a
UMakoUIComponentand point it at your HTML, so it can start as one screen next to your existing UI: a HUD overlay, a UMG widget mixed with your UMG UI, or a world-space panel. Your C++ or Blueprints push state and the UI reacts, and you can call JS functions straight from C++ or Blueprints, or your game code from JS:
// Hud is the UMakoUIComponent on your HUD actor
void AJournalHud::OnGlyphDeciphered()
{
++GlyphsFound;
Hud->SetStateInt(TEXT("glyphs"), GlyphsFound);
}
// the HUD's ui.js
engine.state.watch("glyphs", n => glyphCounter.textContent = n);
- Save the CSS and the game in PIE picks it up on the next frame.
Main Features
- Mako UI Studio (Optional): a visual designer that docks in the Unreal editor, next to the PIE viewport. You lay screens out on a stage and it writes the HTML and CSS your game ships, so designers and programmers work on the same files. You can drop into code at any point.
- Figma Sync: send frames from Figma and Studio merges each update property by property, showing you any conflict. The bindings, translation keys, gamepad navigation and events you added in Studio survive every sync.
-
WebGL and WebGPU:
<canvas>with WebGL and WebGPU, so effects, charts or a 3D model view can live inside the UI (yes, three.js works inside, it transpiles the shaders at edit / build time). -
JavaScript to Native Code: your JavaScript can be compiled ahead of time to optimized native code, so it also runs where JIT isn’t allowed, like consoles and iOS.
-
Automatic Gamepad Navigation: focus moves between elements with any controller, no setup needed. Override the focus order in Studio or in code when you want, style focus states in CSS, and it costs nothing while the controller is idle.
-
Automatic Texture Streaming: images load and unload based on what’s visible, are compressed for the GPU, and the UI stays within its RAM and VRAM budget.
-
Localization: translation keys, plural rules, HarfBuzz shaping, right-to-left text and CJK line breaking, or bridge it to Unreal’s own localization. Fallback fonts only load when a language needs them.
-
Editor Tools: the same stack can build your own Slate editor tabs and tools inside Unreal, just like Studio, using the richness of the web and all the libraries that already exist.
-
Chrome DevTools: connect to the running game over CDP to inspect the DOM, live-edit CSS, use the console and read the script sources.
-
Mak-O (Optional): an agent in Studio. It stays off until you connect it (Claude or OpenAI, with the subscription you already have or an API key). Describe a panel, a menu or a component and it builds it in your game’s existing style, starts from a Smart Template made from your current screen and theme, or designs a new interface from scratch. It plans before it edits, and every change can be undone or iterated: instead of making one big modification in one shot, it stacks small modifications you can edit individually, so you keep full control.
Mako UI is a commercial plugin, coming to Fab with an affordable indie licence. Console builds and studio licences (source access, support) are available on request.
I’d love to get some feedback!
What would you need from a plugin like this?
Waitlist: https://mako-ui.com
Discord: Mako
Thanks!