Game UI middleware, built on web standards
Build it like the web.
Ship it like a game.
Real HTML, CSS and JavaScript, rendered by your engine in under a millisecond. Designers edit the same files the game ships.
Unity
Unreal Engine
Custom C++- Windows
- macOS
- Linux
- iOS
- Android
- Consoles under NDA
From Studio
to the engine
Follow one interface from HTML, CSS, and JavaScript source to the draw list rendered by Unreal Engine, Unity, and a custom C++ host.
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
This is a real game HUD written in HTML, CSS and JavaScript. Change anything: the result updates as you type.
Tab and Shift+Tab move out of the editor. Ctrl/Cmd + ] indents.
In your game, these same files run in the Mako UI runtime, written in native C++, and render through your engine. 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 let Mako Agent build components in your style, right inside the Unity or Unreal editor. Explore the shared HUD below. On desktop, play the Studio tour and take over the editor.
The tour starts here. Take over at any time to edit the shared 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 the objective below. The same HTML and CSS update in the shared HUD.
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.
- Mako AgentDescribe it. Get it in your style.Mako Agent 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.
- 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.
- Timeline
- State machines
- Focus-order editor
- Localization
- Visual regression
- Accessibility audit
- Source control
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.
-
ObjectiveReach the reactor gate27/ 120HP
- <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.
04 / Performance
Under a millisecond.
Every frame.
The Mako UI runtime is native C++, not a browser. No Chromium, no WebView. Your HTML, CSS and JavaScript become a draw list, and your engine renders it with its own shaders, in its own frame.
Frame budget · 16.7 ms
<1ms
A complete shooter HUD, updated, laid out and painted.
>94%
of every frame stays free for gameplay, physics and rendering.
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 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\":\"Reach the reactor\"}");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("\"Reach the reactor\"}"));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.
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 and Unreal 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 |
|---|---|---|---|---|---|---|
| HTML, CSS & JavaScript | UXML / USS / C# | |||||
| 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 | Unity AI · Beta | Unity AI · Beta | MCP · Experimental | MCP + references | Not documented | |
| Backdrop blur | Custom shader | Unity 6.6+ | ||||
| Shared stylesheets | Reusable prefabs | CommonUI styles | XAML styles | |||
| Same UI in Unity & Unreal |
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 teams, Unreal 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, 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 Mako Agent use?
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. Studio licenses add source code access, a source code guarantee, console builds and support. Launch pricing goes to the early-access list 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.