Unreal · UMG
- Edit
- Adjust a Widget Blueprint’s style and event wiring in the Unreal editor.
- Keep in the project
- The Widget Blueprint and any referenced brushes, textures or materials.
- Connect
- Blueprint or C++ gameplay logic.
The UI engine
that speaks web
Your designers ship game UI in days. Real HTML/CSS, no rebuild, native speed.
Game UI middleware for Unity, Unreal Engine and custom C++ hosts.
Currently in private access.
Planned for Unity Asset Store · FAB Enterprise & console licensing →
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.
01 / Try the workflow
Edit the file,
see it live
Start with a game HUD. Change its HTML, CSS or JavaScript and see the result alongside your code.
Tab and Shift+Tab move out of the editor. Ctrl/Cmd + ] indents.
Demo changes stay in this browser session.
Browser preview of your HTML, CSS and JavaScript edits. In your game, Mako UI processes these files in C++ and sends the drawing data to your engine.
02 / Author in Studio
Studio edits the files
your game ships
Mako UI Studio brings visual layout, tokens, animation and code into your engine’s editor. Explore the browser preview below; on desktop, you can take over and edit the shared HUD.
A guided look at Studio
Play the tour, or explore the desktop preview. Changes are saved to demo memory.
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…
A browser tour of Studio’s HTML/CSS workflow, with scripted Agent and Figma examples. JavaScript runs in the Runtime demo above. The installed editor connects to your project and local tools.
- Layout & sourceMove an element, update its CSSEdit on the stage or in code. Studio writes HTML and CSS back to your project; local source changes can reload in a running panel.
- Agent & tokensWork with your coding toolsConnect a supported coding assistant to Studio. Use your project’s design tokens and review the changes in your files.
- Figma & motionBring a frame into your projectImport Figma frames as HTML/CSS and local assets. Author states, breakpoints and animation in Studio. Re-sync replaces the imported subtree.
03 / Connect to your game
Your game state,
on the screen
Connect a health bar to your player, or let a menu button pause the game. Start with your engine’s integration and use the SDK calls below.
- Install the SDKInstall the release package and native binaries for your target. Unity 6000.0+ and Input System 1.7+ are required.
- Render a documentRun
ForgeUI → Verify Setup, thenCreate Sample Panel. UseForgeUIPanelwith your HTML entry point. - Connect gameplaySend state from C#. Use Inspector event bindings to route a UI action back to your game.
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);
});Document → game
<button onclick="@forge:pauseClicked">Pause</button>In the panel Inspector, scan HTML for @forge: events, then connect pauseClicked to a UnityEvent<string> callback.
Fullscreen overlays use the URP Render Feature or HDRP Custom Pass. Canvas widgets and world-space panels also work with Built-in RP. Read the integration notes →
- Install the pluginPlace the release plugin in
Plugins/ForgeUI, including native binaries matching your engine version and target. - Render a documentPut files in
Content/ForgeUI. AddUForgeUIComponentto an Actor, setHtmlFilePath, then Play. - Connect gameplayPush values from Blueprint or C++. Bind
OnForgeUIEventto receive UI actions.
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);
});Document → game
engine.emit('pauseClicked', { paused: true });The Blueprint-assignable OnForgeUIEvent delegate receives the event name and its JSON payload.
HUD overlay, UMG widget and world-space surfaces share the interop API. This integration targets UE 5.8. Your release package lists compatible engine versions. Read the integration notes →
Use Mako’s C++ core for UI layout and styling while your engine handles rendering. Connect it to your graphics API, input and platform services.
HTML · CSS · JS
your UI source C++ core
DOM · layout · paint DrawList → renderer
your graphics API
your UI source C++ core
DOM · layout · paint DrawList → renderer
your graphics API
IRenderBackend
Graphics resources, uploads, render and compute passes, and draw submission.
IPlatformBridge
Host services such as file access, logging, clipboard and shader resolution. Additional capabilities depend on the integration.
The SDK contract covers rendering resources, input and platform services. Read the backend contract overview →
04 / Choose your target
Plan for
your platform
Place UI over the game, inside an existing canvas or on a surface in your world. Choose a rendering mode, then check the targets for your release.
Render modes
| Integration | Fullscreen overlay | In a canvas or in the world |
|---|---|---|
| Unity 6000.0+ | URP 17+ with Render Feature; HDRP 12+ with Custom Pass | Canvas widgets and world panels, including Built-in RP |
| Unreal Engine | ForgeUI Panel component | UMG widget and world component |
| Custom C++ | Your host’s backend and input integration define the available surfaces. | |
Native targets
| Target | SDK status | Before you ship |
|---|---|---|
| Windows · macOS | Desktop runtime and editor checks recorded | Confirm your engine version, graphics API and release binaries. |
| Linux x64 | Native Core tested; engine integration checks vary | Validate the complete packaged game on Linux. |
| iOS · Android | Build and packaging checks; device testing required for each release | Check content loading, input and rendering on your devices. |
| Consoles | NDA platform integrations | Discuss SDK access, licensing and your target → |
Your evaluation build includes its target and engine-version requirements. Target details →
Features & compatibility
Know what
your UI needs.
Build layouts with flexbox and grid, style with gradients, and add animation. Check the features your interface needs in the compatibility notes.
Explore features and limits →CSS coverage
The source audit found that 228 of 274 tracked CSS properties affect the rendered UI. Coverage varies by value and selector; the linked property list explains partial support.
Input, text & accessibility
Gamepad and text input are integrated. Test IME input on your target OS. Unity currently uses monochrome emoji; native OS screen-reader support remains unavailable.
Media & embedded documents
Play audio and video using the codecs in your platform package. Iframes keep UI state separate within the same process. See the compatibility notes for codec and security details.
Hot reload, Studio & Figma
Edit local source files and reload while the UI runs. Studio is editor-only. Figma imports create editable HTML/CSS; re-sync replaces the imported content. Compiled scripts and packaged content use the build workflow.
05 / The iteration loop
One change,
three workflows
Change a HUD button’s appearance and connect its action to gameplay. Here are the editing surfaces and files involved, after initial project setup.
Unity · UI Toolkit
- Edit
- Adjust the element’s USS styles and register its event callback.
- Keep in the project
- UXML structure, USS styles and C# behavior.
- Connect
- C# event handlers and game state.
Mako UI
- Edit
- Change CSS in Studio or your editor, then reload local source in the running UI.
- Keep in the project
- HTML, CSS and JavaScript, plus any referenced assets.
- Connect
- Host state APIs and UI events, as shown above.
These workflows describe iteration after project setup. The time involved depends on your interface, assets and familiarity with each tool.
06 / Performance
Plan your
UI frame budget
See the CPU work behind a complete HUD: changing values, updating layout and preparing the screen for your renderer.
Reference HUD · CPU p95
0.81ms
- Fixture
perf_hud.html- Measured
- 11 July 2026
- Machine
- MacOS-ForgeCI · Apple Silicon
- Recorded p95
- 0.8111 ms · highest of three runs
Recorded in July 2026 for the native CPU pass. Rendering and GPU costs depend on your engine, scene and target hardware. Full method and scope →
07 / Access & licensing
Bring Mako
to your next game
Access is currently by invitation. Join for updates or start a conversation about your studio’s integration.
Access updates
Hear about releases, evaluation access and pricing. SDK access is by invitation.
Join the waitlistPlanned distribution
Unity Asset Store and FAB are planned distribution channels. Join for availability and pricing updates.
The SDK is commercial software. License terms accompany the offer you receive.
Enterprise / Console
Talk through engine versions, native targets, evaluation needs, licensing and support.
Talk to usPublic access starts
on the waitlist
Mako UI is currently available by invitation. Join for access updates, release news and pricing when announced. Studio teams can also request a licensing conversation below.
Planned distribution: Unity Asset Store and FAB.