Mako UI — Build it like the web. Ship it like a game.

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 collapses that loop into one set of files your whole team can touch.

01
Designers wait on programmers.
Designers edit the files the game ships. 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.
Consoles are built in. Gamepad focus, localization and a 1 ms frame budget come with the engine.

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 Mako’s native C++ core 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. Play the tour, then take over and edit the HUD yourself.

A guided look at Studio

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

Skip the Studio preview

Loading the Mako UI Studio preview…

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

The parts of game UI that web tools ignore are the parts Mako was built around.

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. An idle controller costs nothing.
Every language
HarfBuzz shaping, right-to-left text, CJK line breaking and plural rules. Fallback fonts load only when a language needs them.
Sharp text at every size
GPU text rendering at 0.02 ms per glyph, hinted at native size for small HUD labels.
Live 3D inside your menus
<mako-viewport> embeds a live render-to-texture scene: character previews, minimaps, item inspectors.
Video and audio
AV1, VP9 and Opus with GPU colour conversion, for animated backgrounds and cinematics in the UI.
Debug with Chrome DevTools
Connect DevTools to the running game. Inspect the DOM and live-edit CSS while you play.
Ships where your game ships
WindowsmacOSLinuxPlayStation 5Xbox Series X|SNintendo Switch 2iOSAndroid
Console builds are available to registered platform developers.

04 / Performance

Under a millisecond.
Every frame.

Mako is a native C++ engine, 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.

Full HUD frame: 0.81ms
Release gate: 1ms
Text: 0.02ms
Shared assets: 8× 1

HTML · CSS · JS
your UI files Mako C++ core
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 the fastest cold start.

Benchmarks and methodology

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.

Mako UI Panel Standalone inside Unity Editor: build the whole screen. — Create complete HUDs, menus and overlays with HTML, CSS and JavaScript.Unity Editor

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 a MakoUIPanel to any GameObject and point it at your HTML.
Connect gameplayPush values with SetState, call JavaScript with CallJS, 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.

Document → game<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.

Mako UI Panel Standalone inside Unreal Editor: build the whole screen. — Create complete HUDs, menus and overlays with HTML, CSS and JavaScript.Unreal Editor

Connect your gameplay API example

Install the pluginDrop Mako UI into Plugins/MakoUI. Native binaries for every target are included.
Render a documentAdd a UMakoUIComponent to 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.

Document → gameengine.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.

06 / Compare

One style change.
Every screen.

One stylesheet restyles every panel, in Unity and Unreal alike. Pick a look and watch all three panels follow.

ui.cssChoose a look

.hud-panel {
  background: rgba(10, 20, 18, .72);
  border: 1px solid rgba(125, 218, 158, .5);
  border-radius: 14px;
  backdrop-filter: blur(12px);
}

One rule for all 3 elements

Live CSS previewGlass applied to all 3 elements

ObjectiveReach the reactor

Sector 07184 m

PlayerA. Morgan

Health84 / 100

EquipmentMX-4 Carbine

24/ 120

How Mako compares

AvailableNot includedSee note

Feature	Unity UIuGUI	Unity UI Toolkit	UnrealUMG	CoherentGameface	NoesisGUI
Figma sync	Separate plugin	Unity AI · Beta	Separate plugin		SVG artwork
HTML, CSS & JavaScript		UXML / USS / C#
CSS Grid
Backdrop blur	Custom shader	Unity 6.6+
AI that builds in your style	Unity AI · Beta	Unity AI · Beta	MCP · Experimental	MCP + references	Not documented
Shared stylesheets	Reusable prefabs		CommonUI styles		XAML styles
Same UI in Unity & Unreal

Sources for every mark

07 / 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 from the web
Front-end developers and designers are productive on day one. There is no proprietary markup to teach.
One standard, every studio
Unity teams, Unreal teams and in-house engines share the same components, design tokens and screens.
Source access and escrow
Studio licences can include source access. Source-code escrow is available on request.
Console and production support
Platform builds for licensed console developers, integration support and terms agreed per contract.

Talk to us about studio licensing

FAQ

Questions studios
ask first

Is Mako UI a browser inside my game?

No. There is no Chromium and no WebView. A native C++ engine 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 engine 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, Android, PlayStation 5, Xbox Series X|S and Nintendo Switch 2. 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. Studio lives in the editor. Player builds contain the Mako 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 licences add source access, escrow, 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 early-access list for your build, release news and launch pricing. Studios and publishers can ask for a licensing conversation in the same step.

Build it like the web.
Ship it like a game.

Game UI is where
schedules slip

Edit the file,
see it live

Studio edits the files
your game ships

Controllers, consoles
and every language

Controller-ready from the first build

Every language

Sharp text at every size

Live 3D inside your menus

Video and audio

Debug with Chrome DevTools

Ships where your game ships

Under a millisecond.
Every frame.

One UI.
Every engine.

Call a JavaScript function

Call a JavaScript function

IRenderBackend

IPlatformBridge

One style change.
Every screen.

How Mako compares

Your UI team
already knows this

Hire from the web

One standard, every studio

Source access and escrow

Console and production support

Questions studios
ask first

Get Mako UI
in the next wave

Build it like the web.Ship it like a game.

Controller-ready from the first build

Every language

Sharp text at every size

Live 3D inside your menus

Video and audio

Debug with Chrome DevTools

Ships where your game ships

Call a JavaScript function

Call a JavaScript function

IRenderBackend

IPlatformBridge

How Mako compares

Hire from the web

One standard, every studio

Source access and escrow

Console and production support

Build it like the web.
Ship it like a game.