CalmUI
DocumentationContactApply to test CalmUI
Game UI for Unreal Engine

Build game UI. Keep your game running.

Create menus, HUDs and inventories in CalmUI Studio using HTML-like templates, CSS and TypeScript. Connect your UI to gameplay through C++ or Blueprints, and preview UI changes in a running play session.

Apply to test CalmUI See the workflow

Now accepting testing applications.

Studio + Unreal plugin · Native renderingUnreal Engine 5.7.4 · Windows x64

CALMUI STUDIOShowcase · Expedition CommandRendered by the CalmUI runtime
CalmUI showcase: dark glass menu with conic hold ring, blur and localized labels

A screen built with CalmUI. Rendered by the CalmUI runtime, from HTML-like templates, CSS and TypeScript.

HOW YOU WORK

From a UI change to a running game.

Edit your UI in Studio, preview the result, and check it in your Unreal project.

  1. CalmUI Studio New view dialog: a View name field containing PauseMenu, a Template selector set to Empty, and Cancel and Create screen buttons
    CalmUI Studio, creating a View
    01

    Create your screens

    Build menus, HUDs and reusable components in CalmUI Studio.

  2. Blueprint graph: Open CalmUI Screen Completed starting Listen for CalmUI Action for MainMenu.Exit; On Action runs Quit Game
    Blueprint: listening for a CalmUI action
    02

    Connect to gameplay

    Connect your UI to game data and actions through C++ or Blueprints.

  3. Calmaria main menu running in Unreal, built with CalmUI
    Calmaria, running the CalmUI package in Unreal
    03

    Preview changes in Unreal

    Check supported UI changes in a running play session without restarting it.

A failed compile keeps the last working interface, Store state and focus instead of replacing the screen you are looking at. Store and action definition changes rebuild the package and can reload a complete View. What a save updates

DAY TO DAY

Less repetition. More time on the UI itself.

Reuse components across screens

Build a button, panel or menu component once, then use it wherever your UI needs it.

Component library

Keep styles consistent

Keep colors, spacing and typography in shared styles, so you don’t have to adjust each screen separately.

Themes and tokens

Check layouts while you work

Preview your UI at different sizes to catch cramped layouts and overflowing text before testing them in-game.

Preview
What CalmUI does and does not cover
OUR OWN PROJECT

Built alongside Calmaria.

CalmUI began as a way to make UI work more practical while building Calmaria, our own game. It grew into a separate tool for creating and integrating game interfaces. These screens show CalmUI in use in that project and in the CalmUI showcase sample.

MainMenu.calmui
import { computed, defineComponent, loc } from "@calmui/runtime";
import { store } from "@calmui/store";
import { actions } from "@calmui/actions";

export default defineComponent<Record<string, unknown>, unknown>(() => {
  const hasSave = computed(() => store.session.hasSave);
  const lastSaveLabel = computed(() => {
    const minutes = Math.floor((Date.now() - store.session.savedAt) / 60_000);
    if (minutes < 1) {
      return loc("Showcase::MainMenu.SavedJustNow", "Saved just now");
    }
    return loc(
      "Showcase::MainMenu.LastSave",
      "Last save: {minutes} min ago",
      { minutes },
    );
  });
  function start(): void {
    if (hasSave.value) actions.mainMenu.continueGame();
    else actions.mainMenu.play();
  }
  return { hasSave, lastSaveLabel, start };
});
AUTHORING AND RENDERING

Web-style authoring. Native Unreal rendering.

CalmUI uses HTML-like templates and a documented CSS feature set. Your UI runs through the Unreal plugin, rather than inside an embedded web browser.

Connect UI to gameplay

Use the C++ and Blueprint integration to connect your screens to the data and actions in your game.

Blueprint and C++ integration

Keep your UI in editable source files

Review changes in Git, edit outside Studio and keep your UI source alongside your project.

The .calmui file reference
Which CSS features are supported
AUTHORCalmUI Studio.calmui · CSS · TypeScript
COMPILECalmUI CoreValidated, versioned .cuipack
RENDERUnreal EngineNative renderer, no embedded browser
ALSO IN CALMUI

The parts you reach for later.

  • World-space UI

    Anchor interface to actors with native world markers instead of a widget per actor.

  • Gamepad and keyboard focus

    Navigate screens with mouse, keyboard or gamepad through the plugin’s input profiles.

  • Localization

    Author localized text in templates and scripts, and test it in Preview.

  • Mock actions for design work

    Preview screens against Store fields you control, before the gameplay code exists.

  • Readable diagnostics

    CSS profile limits and compiler errors report as codes you can look up and fix.

  • CLI and packaging

    Build packages from the command line and ship them with your Unreal project.

MEASURE, DON’T GUESS

Profile UI performance as you build.

Studio’s cost pill and Profiler report the frame total, layout passes, full document renders (with the reason when a change could not be patched in place), style resolves and patch counters while you author. Recorded numbers from our own project, with the build, scene, viewport and method they were measured under, are in the docs.

Measured examples and how they were taken
CalmUI Studio Profiler with the Reload cost section: layout passes, full document renders, style resolves, text, attribute and structural patches, retained screens, plus Frame, PaintFrame, Selected node and Development memory sections
Studio Profiler, samples/Showcase. Reading the cost panel
QUESTIONS

About CalmUI and the testing program.

How can I get access?

CalmUI is currently accepting testing applications. Submit the form with a few details about your Unreal project. We’ll contact you if we can offer you access to a test build.

What does CalmUI include?

CalmUI includes Studio for creating UI and an Unreal Engine plugin for running it in your game. It is supplied as a Windows installer and a plugin for your project.

Does CalmUI run a browser inside my game?

No. CalmUI uses web-style authoring, while the Unreal plugin renders the UI without an embedded browser.

Can I import an existing website or use any CSS library?

CalmUI is not a browser runtime. It uses HTML-like templates and a documented CSS feature set, so existing web interfaces may need changes. Check the supported CSS features before adapting an existing UI.

Is Studio a visual editor?

Studio combines source editing with live preview and inspection tools. You can add, move and remove elements in Hierarchy and change shared colors, spacing and typography in Themes; appearance itself is edited as CSS. It is not a full drag-and-drop page builder. What you can arrange in Studio.

Which Unreal versions and platforms can I test?

Test builds target Unreal Engine 5.7 on Windows x64, validated on 5.7.4. Studio, the CLI and the Unreal Editor, Development and Shipping builds are released for Windows x64; Linux and macOS have build automation only and are not a validated runtime target. See supported platforms and version compatibility.

TESTING PROGRAM

Help test CalmUI in a real Unreal project.

Tell us what you’re building and which parts of your UI workflow you’d like to improve.

Apply to test CalmUI Read the documentation

Applications are reviewed before access is offered.