Fogspire/Folio
git clone https://github.com/Fogspire/Folio.git Plugins/Folio

Folio

Custom UI Rendering Framework for Unreal Engine 5.

HTML/CSS-style markup provides rapid development and iteration. Polished results in minutes with Folio instead of days with UMG/Slate. Infinitely scalable; sharp at every size. Data-driven vector gauges written as plain text. World-space UI unaffected by TAA/TSR. Surface projected UI. Common game functionality included.

Requires Unreal Engine 5.8 or later, with Deferred or Forward rendering.

  • StartHello world

    Install the plugin and get a document on screen

  • Folio Studio

    The visual editor

  • UI_CONVENTIONS

    What the stylesheet language supports. It is close to CSS and is not CSS; read this before writing any

  • AGENTS

    The brief to hand an AI agent asked to build UI with Folio

  • Troubleshooting

    A document that does not appear; known gaps for what Folio does not do yet

Why Folio

Data-Driven Vector Gauges in Markup

Dials, tapes, arcs, needles and filled shapes are plain text, bound straight to game data with no game code. <scale> lays out a gauge's ticks and numbers, and arc and wedge turn a value into the shape that follows it. Each path is one draw, sharp at any size and angle.

A speed dial at 7.6: green value arc, white ticks and numbers, red redline band, yellow needle

RML
<scale kind="arc" from="0" to="12" step="0.5" major="1" centre="220 220" radius="160" start-angle="-135" end-angle="135"/>
<path class="value" data-attr-d="(Speed / 12) | arc(220, 220, 180, -135, 135)"/>
<path class="redline" data-attr-d="1 | wedge(220, 220, 196, 90, 135, 190)"/>
<path class="needle" d="M 220 220 V 92" data-style-transform="'rotate(' + (Speed / 12 * 270 - 135) + 'deg)'"/>

The whole gauge is examples/gauge.rml. See paths and scales.

Your Own Shaders, One Line of Markup

Register a GPU pass once in C++, then put it on any element, or on whatever is behind one, by name. Glows reach as far as you ask, not a tenth of an em. A still element runs its pass once and reuses the result, so a glowing title on a settled menu costs nothing per frame.

A FOLIO title with an orange glow, an outlined tile with a cyan glow, a tile with a drop shadow, a tile rippled by a shader filter, and a striped strip rippling behind a panel with a backdrop shader filter

RCSS
.title { filter: glow(#ff7a1a 28dp 2.5); }
.panel { filter: shader("heat 8dp 2 1.5"); }
.lens  { backdrop-filter: shader("heat 12dp 2 0.5"); }

The preview and Folio Studio run a GLSL stand-in for your pass, so designers see the effect without Unreal. See glow and shader filters.

Grid, calc() and var()

display: grid with fr tracks, spans and auto-placement; calc(100% - 2 * 12dp) wherever a length goes; custom properties, so one class on a container retints everything inside. See layout and themes.

Two identical inventory grids, one blue and one red: a large slot spanning two columns and two rows, outlined full slots, and a bar sized with calc. The red one differs only by a class that sets two custom properties

RCSS
.panel { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.big   { grid-column: span 2; grid-row: span 2; background-color: var(--accent); }
.bar   { width: calc(100% - 4 * var(--gap)); }
.red   { --accent: #ff5a4a; --slot: #2a1c1e; }

Fully Text Based

Build your entire UI in Folio Studio, a cross-platform WYSIWYG editor that draws with the same renderer the game does, without your designer needing to install Unreal.

A minute of markup results in polished animated menus. The same thing in UMG or Slate is days or weeks in the clunky Unreal Engine editor.

No binary .uasset - it diffs, merges, and reviews like code, because it is code. No competing for p4 locks or git conflicts.

Folio Studio

Unparalleled Clarity + Limitless Scaling

Text and vector art are distance fields, resolved for the exact pixel they land on; always crisp and clear.

Regardless of resolution, or the use of transform: scale(8), mid-animation, from across a room, or a VR player pressing their face into the cockpit display panel - the UI scales while remaining sharp.

Text has no atlas per font size and no blur when text grows, shrinks, or rotates. One field per glyph serves every size. Variable-weight fonts, outlines, and glows are part of the same field. Slate rasterises a bitmap for each size but Folio never does, resulting in superior fidelity under scale.

No Smeared Post-Processing from TAA/TSR, Motion Blur

A text document on a computer screen, a sign or a cockpit panel is drawn after the tonemapper by default, where TAA, TSR, motion blur and post-processing cannot reach it.

World UI in Unreal normally smears the moment the camera moves; Folio documents do not. It is still depth-tested, so it clips geometry correctly.

Two other modes put it in the scene to take post-processing if desired.

Surface-Projected UI

Documents can be projected onto the surface of a mesh, with input enabled, so that CRT monitor the player can use? Already sorted as a byproduct of a proper tech foundation: CRT terminal tutorial

Surface projected documents are affected by post-processing. Any game that wants surface-projected UI with the same exceptional crispness should not use TAA/TSR - the ideal path is forward rendering with MSAA.

Screen-Space UI Projected to World

Folio ships with a ready-made screen-space UI component that projects into world space. This includes a ton of parameters to reproduce common game functionality, such as keeping your nameplates clamped to the edge of a screen within a certain threshold.

A nameplate reading Sentry Drone with a health bar, pinned to a point over the ocean ahead of a cockpit

See world markers.

Real 3D Transforms

Modern UI often draw HUDs or menus with perspective instead of flat 2D panels. Folio supports this. For example:

RML
.vitals, .comms { transform: perspective(900dp) rotateY(38deg); transform-origin: 0% 50%; }
electron_2026-10-17_14-53-41

Animation Built-In

Transitions, keyframes, springs that respond to the camera, and a shader decorator for scan lines, sweeps and additive glow.

Merely a single line of text for each element.

electron_2026-10-15_09-54-23
RML
.header
{
	display: flex;
	flex-direction: row;
	align-items: baseline;
	gap: 22dp;
	animation: 0.4s cubic-out cut-in;
}

Animated Sprites

<flipbook> plays a sprite sheet or numbered frames, previewable in Folio Studio. Bind its clip, frame rate, pause or frame to game data and it follows the game.

Here Mario copies the player: walk, sprint, jump, fall and skid. Build it with the sprite HUD tutorial.

VIDEO_URL

RML
<flipbook data-attr-sprites="Clip" data-attr-fps="Fps"/>

Common Game Functionality Out-of-the-Box

All waiting for you in Folio Studio, either as a recipe or a tutorial. Don't waste time reproducing functionality common to many games, like UMG/Slate expects.

Input and Menu Navigation

Keyboard and gamepad navigation works out-of-the-box, including rebinding. Want to support WASD, IJKL for left-handed users, mouse, and gamepad? If you have added Folio to your project, you already have it.

Folio provides spatial navigation, focus, modals, input prompts that swap when the player picks up a gamepad, with no focus code to write.

Game-Driven Bindings

Bind any UObject by reflection: {{ Health }} in text, lists from arrays, commands back to C++ or Blueprint. No JavaScript and no binding code required.

Virtual Reality Support

World documents render correctly under instanced stereo, verified with Unreal's emulated stereo. It has not yet been run on a headset. Full VR support is intended, so raise an issue if anything doesn't work as expected. If it does work as expected, reach out anyway so this can be confirmed.

AI Enabled Prototyping

A short prompt can come back as a finished working screen. Hand it AGENTS.md. May benefit from also handing it a concept image if available.

Showcase

electron_2026-10-17_15-38-03

Released a game using Folio? Get in touch and it may appear here

In the box

Menus

Main menu, pause menu, confirmation dialog, modal focus trapping, a controls screen that rebinds against Enhanced Input.

Production features

  • Accessibility. Built with at minimum the following in mind: Screen reader that reads menus aloud, text scale, reduced motion, high-contrast settings. Build checks via verification harness. See accessibility.
  • Real text shaping. HarfBuzz shapes every string: ligatures, contextual forms, combining marks, GPOS kerning and right-to-left scripts.
  • Localisation. Strings are keyed in markup and gathered into Unreal's own localisation pipeline, with pseudo-localisation to find layouts that only fit English before translation exists.
  • A build gate. --strict fails the build on a stylesheet mistake, the accessibility checks run beside it, and a verification harness diffs text metrics and screenshots between changes. The engine side carries its own automation tests.
  • Two renderers, one result. The standalone preview and the engine share the font engine, the distance fields and the shader maths, and a parity check fails the build if the two drift.
  • Performance. A document that has not changed costs nothing per frame. stat Folio and Unreal Insights scopes cover the whole path, and expensive effects bake to textures.
  • Fits your project design. Hosts inside an existing UMG or CommonUI tree, so CommonUI activatable widgets keep working as the screen stack and input handler around a document, binds MVVM view models or plain objects, reads Enhanced Input, and stages documents for packaging. Documents are loose files, so UI can be changed on a device without cooking again.
  • Honest limits. What Folio does not do yet lists every known gap in one place.
  • Source and licence. All source is here. Use it in commercial games and change it freely; see License.

Developing

WindowsmacOSLinux
The plugin in the Unreal editorSupportedBetaBeta
Building its libraries (build_ue_libs.sh)SupportedBetaBeta
Folio StudioSupportedBetaBeta
uipreviewSupportedNot portedNot ported

Shipping

Platform
WindowsSupported
macOS, LinuxBeta
Nintendo SwitchRuns on a devkit
Other consolesNot tried

Folio is developed on Windows. The aim is for it to work as well everywhere else, so treat each new release as beta on macOS and Linux, and open an issue when something does not work there. For a console, an issue is welcome too: support will be attempted where it can be.

To build Folio's tools or work on Folio itself, see Building Folio. Dependencies and their pins are listed in Internals.

License

Folio is free, source included, and built to be the UI layer of a shipping game, from a solo project to a full production, from indie to AAA.

MIT with the Commons Clause. In short:

You may
Use Folio in any game, commercial or notYes
Change it for your gameYes
Publish your forkYes, under the same license
Sell Folio, or a product or service whose value is mostly FolioNo

For a commercial license, open an issue or ask the author.

Contributions are accepted only with the right for the author to relicense them, so a commercial license can cover the whole of Folio.

Latest: 1.12.0

  • Marker Layer Z Order in Project Settings > Plugins > Folio: where the marker layer sits among the viewport's widgets, so a HUD can draw under markers. See docs/markers.md

Every release