Game UI middleware, built on web standards
Build it like the web.
Ship it like a game.
Real HTML, CSS and JavaScript, rendered natively by your engine, built for speed next to engine-integrated toolkits. Designers edit the same files the game ships.
Unity
Unreal Engine
Godot
Custom C++- Windows
- macOS
- Linux
- iOS
- Android
- Consoles under NDA
The teaser
See it in
ninety seconds
A game HUD taken apart: real HTML, CSS and JavaScript, rendered natively in Unreal Engine, Unity and Godot, then edited in Mako Studio while the game runs.
Why Mako
Game UI is where
schedules slip
Every HUD, menu and settings screen goes through the same loop: mock it up, rebuild it in the engine, review it, rebuild it again. Mako replaces that loop with one set of files the whole team edits.
- 01
Designers wait on programmers.
Designers edit the files the game ships. Mako Studio writes real HTML and CSS, and the running game reloads them.
- 02
Figma gets rebuilt by hand.
Figma syncs, property by property. Bindings, translations and gamepad navigation survive every update.
- 03
Every platform needs another pass.
One runtime, every platform. Gamepad navigation, localization and console support are built in, within a 1 ms frame budget.
01 / Try it
Edit the file,
see it live
Six game UIs from our Unity and Unreal demos, in the HTML, CSS and JavaScript the engines run. Pick one and change anything: the result updates as you type.
Vesper · first-person shooter · Unreal Engine 5Recorded in Unreal Engine 5. Edit the code below to run it live
Tab and Shift+Tab move out of the editor. Ctrl/Cmd + ] indents.
Each preview starts as a recording of the demo running in Unity or Unreal. Edit the code and the same files run live in your browser, over a screenshot of the scene. In the game, the same files run in the Mako UI runtime, written in native C++, and the game pushes the state. Open Chrome DevTools on the running game to inspect and live-edit them.
02 / Studio
Studio edits the files
your game ships
Lay out screens visually, drop into code whenever you want, and, if you want it, let Mak-O, the optional built-in agent, build components in your style, right inside the Unity, Unreal or Godot editor. Explore Vesper’s real HUD below, the same files that run in Unity, Unreal and Godot. On desktop, play the Studio tour and take over the editor.
The tour starts here. Take over at any time to edit the Vesper HUD.
On touch screens, use these controls for the guided visit. Open this page on a desktop to edit the Studio preview.
Tour ready
Loading the Mako UI Studio preview…
Your words. Your color.
Change Vesper’s objective below. Its index.html, ui.css and ui.js update in the shared project.
Edits stay in this browser tab.
Open this page on desktop to explore the complete Studio editor.
Every change you just saw is plain HTML and CSS, saved in your project and ready for source control.
- Visual + codeDrag it on the stage, watch the CSS followThe stage, the layers and the code editor work on the same files. Components, variants, theme tokens, breakpoints and states are built in.
- Figma round-tripDesigners keep designing in FigmaSend frames from Figma and Studio merges each update property by property. Bindings, translation keys, gamepad navigation and events added in Studio survive every sync.
- Mak-O · optionalDescribe it. Get it in your style.An optional agent: Studio works fully without it. When you turn it on, Mak-O reads your screen, styles and theme, then builds components you can edit and reuse. It runs on Claude or OpenAI models, with an API key or the subscription you already have, and every edit is undoable.
- Timeline
- State machines
- Focus-order editor
- Localization
- Visual regression
- Accessibility audit
- Source control
An agent that builds UI in your game’s style.
Describe a panel, a menu or a component. Mak-O writes it as HTML and CSS in Studio, with the components and theme your game already uses.
- Reads your HUD, its styles and theme tokens
- Checks its work: readable text, no errors
- Hot-reloads every edit, and every edit is undoable
03 / Built for games
Controllers, consoles
and every language
Gamepad navigation, localization, gameplay data, 3D views, video and debugging come with the Mako UI runtime.
-
Controller-ready from the first build
Focus navigation works with any gamepad out of the box. Set the focus order visually in Studio and style focus states in CSS. Navigation costs nothing while the controller is idle.
-
Every language
HarfBuzz shaping, right-to-left text, CJK line breaking and plural rules. Fallback fonts load only when a language needs them.
-
Gameplay in one line
Push values from C#, C++ or Blueprint and the UI reacts on the next frame. UI events come back as engine events.
-
Live 3D inside your menus
<mako-viewport>embeds a live scene from your engine: character previews, minimaps, item inspectors. -
Video and audio
AV1, VP9 and Opus with GPU color conversion, for animated backgrounds and cinematics in the UI.
-
ObjectiveSecure the uplink27/ 90HP
- <div class="hud">
- <div class="objective">
- <div class="vitals">
- <div class="ammo">
.ammo {
}
Debug with Chrome DevTools
Connect DevTools to the running game, pick an element and live-edit its CSS while you play. Try it: click a node, then change a value.
-
Ships where your game ships
Windows, macOS, Linux, iOS and Android. Console support is available to registered platform developers under NDA.
Native C++. No Chromium. No WebView.
04 / Performance
Built for speed. Built for your frame budget.
Next to engine-integrated toolkits.
The Mako UI runtime is native C++, not a browser. Your HTML, CSS and JavaScript become a draw list, and your engine renders it with its own shaders, in its own frame.
UI performance · relative
your UI files Mako UI runtime
DOM · cascade · layout · paint Draw list
flat and GPU-ready Your renderer
your shaders, your frame
- Only what changed is recomputed.Unchanged layout and paint are reused from the last frame.
- Hidden UI costs nothing.Hidden and fully transparent elements skip paint automatically.
- JavaScript, compiled ahead of time.Ship scripts as bytecode or native code for faster startup.
05 / Integration
One UI.
Every engine.
Write the interface once. Ship it in Unity, Unreal Engine, Godot or your own C++ engine: as a full screen, inside the UI you already have, or as a tool for your team.
Connect your gameplay API example
- Install the packageImport Mako UI for Unity 6. Native binaries for every target come in the package.
- Render a documentRun
Verify Setup, add aMakoUIPanelto any GameObject and point it at your HTML. - Connect gameplayPush values with
SetState, call JavaScript withCallJS, and route UI events to C# with[MakoUIEvent].
C# → document · initialized panel
panel.SetState("player.health", 87.5f);JavaScript · hud.html contains #hp
engine.state.watch(
'player.health', value => {
document.querySelector('#hp')
.textContent = Math.round(value);
}
);Call a JavaScript function
C# → JavaScript · loaded UI
panel.CallJS("hud.showObjective",
"{\"text\":\"Secure the uplink\"}");JavaScript · hud.html contains #objective
window.hud = {
showObjective({ text }) {
document.querySelector('#objective')
.textContent = text;
}
};CallJS runs the function on the next UI update.
<button onclick="@mako:pauseClicked">Pause</button>[MakoUIEvent("pauseClicked")]
public UnityEvent OnPause = new UnityEvent();Any MonoBehaviour next to the panel receives the event. Wire it in the Inspector like any other UnityEvent.
Full-screen overlays plug into URP 17+ and HDRP 12+. Canvas widgets and world-space panels drop into the scenes you already have.
Connect your gameplay API example
- Install the pluginDrop Mako UI into
Plugins/MakoUI. Native binaries for every target are included. - Render a documentAdd a
UMakoUIComponentto an Actor, point it at your HTML and press Play. - Connect gameplayPush values and call JavaScript from Blueprint or C++. UI events arrive as Blueprint events.
C++ → document · initialized component
Panel->SetStateFloat(
TEXT("player.health"), 87.5f);JavaScript · hud.html contains #hp
engine.state.watch(
'player.health', value => {
document.querySelector('#hp')
.textContent = Math.round(value);
}
);Call a JavaScript function
C++ → JavaScript · loaded UI
Panel->CallJS(
TEXT("hud.showObjective"),
TEXT("{\"text\":")
TEXT("\"Secure the uplink\"}"));JavaScript · hud.html contains #objective
window.hud = {
showObjective({ text }) {
document.querySelector('#objective')
.textContent = text;
}
};In Blueprint, use Call JS with the same function path and JSON argument. The function runs on the next UI update.
engine.emit('pauseClicked', { paused: true });A Blueprint-assignable event receives the event name and its JSON payload.
HUD overlays, UMG widgets and world-space panels share one API, built for Unreal Engine 5.
Mako UI for Godot 4 is a GDExtension: no WebView, the same pages as in Unity and Unreal. It is in alpha.
Connect your gameplay API example
- Install the addonCopy
addons/makouiinto your project and enable Mako UI in Project Settings → Plugins. - Render a documentRun
Verify Setup, add aMakoUIPanelnode, or aMakoUIWorldPanelin 3D, and point it at your HTML. - Connect gameplayPush values with
set_state, call JavaScript withcall_js, and receive UI events through theui_eventsignal.
GDScript → document · ready panel
ui.set_state("player", {"health": 87.5})JavaScript · hud.html contains #hp
engine.state.watch(
'player.health', value => {
document.querySelector('#hp')
.textContent = Math.round(value);
}
);engine.emit('pauseClicked', { paused: true });ui.ui_event.connect(func(name, payload):
if name == "pauseClicked":
get_tree().paused = true)The panel's ui_event signal receives the event name and its payload.
On export, your UI files are packed into the game.
Running your own engine? Link the Mako UI runtime through a stable C ABI. The runtime handles DOM, styling, layout, scripting and paint; your renderer draws the result with its own graphics API.
your UI source Mako UI runtime
DOM · layout · paint DrawList → renderer
your graphics API
IRenderBackend
Graphics resources, uploads, render and compute passes, and draw submission.
IPlatformBridge
File access, logging, clipboard and shader resolution: the host services the runtime asks your engine for.
06 / Themes
Change one file.
Change the whole game.
A theme is a handful of design tokens in plain CSS. Swap them and every HUD, menu and screen follows, in Unity, Unreal and Godot alike.
07 / Compare
How Mako UI
compares
Mako UI next to the UI systems built into Unity and Unreal Engine, and next to other game UI middleware.
| Feature |  Mako UI | Unity UIuGUI | Unity UI Toolkit | UnrealUMG |  CoherentGameface |  NoesisGUI | UltralightWebKit fork |
|---|---|---|---|---|---|---|---|
| HTML, CSS & JavaScript | UXML / USS / C# | ||||||
| JS · TS to native code | Not included: No JS | Not included: No JS | Not included: Blueprint VM | Not included: No JS | Not included: JavaScriptCore | ||
| Real CSS layout: Flexbox, Grid, block, inline, tables | Available: Flexbox and Grid | Flexbox only | Flexbox only | ||||
| Figma re-sync that keeps your work | Import plugin | Unity AI · Beta | Import plugin | One-way export | SVG artwork | ||
| Visual editor inside your engine | External web builder | Studio · Beta | |||||
| AI that builds in your style (optional) | Unity AI · Beta | Unity AI · Beta | MCP · Experimental | MCP + references | Not documented | ||
| Backdrop blur | Custom shader | Unity 6.6+ | Not documented | ||||
| Shared stylesheets | Reusable prefabs | CommonUI styles | XAML styles | ||||
| Same UI in Unity, Unreal & Godot | Unity & Unreal only | Unity & Unreal only | Not included: C++ API only |
08 / For publishers and studios
Your UI team
already knows this
HTML, CSS and JavaScript are the most widely known UI skills in software. Mako turns them into one UI standard across every studio, engine and platform you ship.
Hire web developers
Front-end developers and designers already know the languages. There is no proprietary markup to learn.
One standard, every studio
Unity, Unreal and Godot teams and in-house engines share the same components, design tokens and screens.
Source code, guaranteed
Studio licenses can include the full source code. On request, a copy is held by an independent third party and released to you if Mako UI is ever discontinued.
Console and production support
Platform builds for licensed console developers, integration support and terms agreed per contract.
Talk to us about studio licensing
Team
The people
behind Mako UI
FAQ
Questions studios
ask first
Is Mako UI a browser inside my game?
No. There is no Chromium and no WebView. The Mako UI runtime, written in native C++, parses your HTML and CSS, runs your JavaScript and hands a draw list to your renderer. Your engine draws every pixel.
What about JavaScript performance and garbage collection?
Scripts run on a lightweight script VM inside the Mako UI runtime, with a generational garbage collector and a time budget per UI. You can compile scripts ahead of time to bytecode or native code. Gameplay data arrives through SetState, so per-frame script work stays small.
Which engines and platforms are supported?
Unity 6 with URP or HDRP, Unreal Engine 5, Godot 4 (alpha) and custom C++ engines. Windows, macOS, Linux, iOS and Android, plus current consoles for registered platform developers under NDA. Full requirements
Does a Figma sync overwrite work done in Studio?
No. Studio merges each update property by property. A conflict shows both values so you choose. Bindings, translation keys, gamepad navigation and events added in Studio are never touched.
Which AI does Mak-O use?
Mak-O is optional: Studio and the runtime work fully without it, and it does nothing until you connect it. It uses Claude or OpenAI models. Sign in with an API key or with the Claude or ChatGPT subscription you already have. The agent plans before it edits, and every change it makes is undoable.
Does Studio ship inside my game?
No. Mako Studio lives in the editor. Player builds contain the Mako UI runtime and your UI files, nothing else.
How is Mako UI licensed?
Mako UI is commercial software, coming to the Unity Asset Store and FAB, and to the Makoworks portal for Godot. Studio licenses add source code access, a source code guarantee, console builds and support. Launch pricing goes to the waitlist first.
Early access
Get Mako UI
in the next wave
Evaluation builds ship in waves. Join the list to get an evaluation build, release news and launch pricing. Studios and publishers can ask for a licensing conversation in the same step.