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

Folio documentation

RmlUi-based UI for Unreal: markup and stylesheets instead of widget graphs, distance-field text and vector art sharp at any size, and a preview tool that lays out identically to the engine.

Read Start here in order if you are new. Everything after it stands alone.

The one thing to know first

RmlUi is not a browser and RCSS is not CSS. Valid-looking CSS parses and then does nothing: background-image, text-shadow, clamp(), 120ms, rgba(0,0,0,0.5). None of those warn.

Two habits cover it:

  • Run with --strict. Nearly every RCSS mistake is a warning rather than an error, and a check that only looks at errors passes a broken stylesheet.
  • When something does nothing, look it up in UI_CONVENTIONS.md before debugging it; it is usually on the banned list.

Start here

Hello worldInstall the plugin, get a document on screen, cook and ship it.
Folio StudioA visual editor on Windows, macOS and Linux: select, drag, resize and restyle on the real renderer, with every edit written back as text.
Folio Studio referenceEvery panel, mouse action, shortcut and setting.
Setting up VSCodeHighlighting for .rml and .rcss, if you write markup in VSCode.
Testing a documentuipreview, --strict, screenshots, and the checks that stop a broken stylesheet shipping.
Assigning a documentThe editor picker, portable paths, and how a wrong one is reported.

Building a screen

Layout and panelsFlexbox, the box model, units, and the three layout traps.
Components, themes and recipesThe shipped library, why a component carries no colour, and how a game overrides it.
Text and fontsRegistering faces, variable weights, font effects and their size cap, and the small-text trade-off.
Rich text, terms and the typewriter<text>: emphasis inside a translatable line, names shared across the game, and dialogue that types itself out.
Images and spritesSpritesheets, the image decorator's fit modes, ninepatch, and when a PNG is the right answer.
Vector artSVG baked to distance fields: infinitely scalable icons, the colour-layer stack, and what a field cannot represent.
Line graphs<line-graph>: a smooth, per-point coloured line for live readings, with a dot on the newest and an average line.
Paths<path>: SVG path data stroked and filled, with joins, caps and arcs, bound to data for gauges and needles.
Scales<scale>: a gauge's ticks and numbers along a line or an arc, from a range and a step.
Flipbooks<flipbook>: an image that plays its frames, on its own or paused, seeked and driven from game data.
AnimationTransitions, keyframes, and what is cheap to animate.
The shader decoratorAdditive blending, scanlines and sweeps: the effects RCSS has no syntax for.
Glow and shader filtersA halo of any size, drop shadows, and your own GPU pass over an element or what is behind it.
Drifting motesAtmosphere behind a menu, in six quads and no particle system.
Scrolling and scrollbarsOne serious trap, and why an incidental overflow confines focus.

Making it respond

Input and navigationKeyboard, gamepad and mouse; the one nav rule that everything else follows from; rebinding.
Form controlsThe real element types, and the tabset trap that looks like a layout bug.
Modals and focus trappingOpening a modal and keeping focus inside it.
Drag, drop and resizeMoving, dropping and resizing with no code, and where the game takes over.
UI soundsFour moments reported, nothing played.
Data bindingDriving a document from gameplay, and whether you want MVVM.
Generating a view modelThe codegen path, when reflection is not enough.
Calling into game codeHosting a document in an existing widget tree, events, and the CommonUI focus trap.

In the world

Documents in the worldA monitor on a desk, a sign on a wall: putting a document on a surface and clicking it.
World document settingsEvery draw mode, property, call and console command of the world component.
Input promptsShowing the key a player bound, drawn rather than authored, and swapping when they pick up a pad.
Nameplates and markersScreen-space documents that follow a world location.
Subtitles and closed captionsStacked captions: several speakers at once, each line on its own clock, a name and colour per speaker, sounds set apart from speech. Why the sound does not decide how long one holds, and why a line has to be held in the list to animate away.
A HUD that responds to the cameraSprings, so a visor lags a turn and settles. What transitions cannot express.

Shipping

Accessibility checksContrast, text size, hit targets, focus visibility and control names, checked in the build.
Screen readerThe tree NVDA, JAWS or a console narrator reads, the game's own voice, the review cursor and the folio-* attributes.
Presentation settingsText scale, reduced motion, high contrast, screen effects, text speed and colour-vision simulation.
Localisationdata-loc, the gather, and previewing pseudo-loc before translation exists.
Performance and profilingstat Folio, the invalidation path, and what makes a screen slow.
Profiling referenceEvery stat Folio row, Insights, CSV and LLM, the invalidation trace and uipreview PERF findings.
SupersamplingMore samples per pixel for a slanted edge: turning it on, what 2x and 4x cost, and why text stays sharp.
Console commandsEverything Folio adds to the console, and what each is for.
Packaging §7Documents are files, not assets: they need staging, or every screen is empty in a build that worked.

Tutorials

A dialogue systemA speaker, a line that types itself out, and replies: markup a writer types, names the whole game shares, and where each half enters the document.
A CRT terminal in the worldThe whole vocabulary in one build: an oval screen, a text field, a draggable window with a bin and an animated close, onto a curved surface with scan lines.
An inventory screenA grid, drag and drop between slots, gamepad navigation, and a data model behind it.
A grid inventoryItems that span several cells: grid lines from gradients, a ghost that shows whether a drop fits, locked cells, and one set of commands for mouse, keyboard and pad.
A list of ten thousand itemsBinding a fixed-size window instead of the array, so scrolling allocates nothing.
A controls screenRebinding against Enhanced Input's own profile: a press-any-key panel that catches keys the game has bound, and what to do when one is already taken.
A helmet HUD that responds to the playerA first-person visor with no art at all: a helmet made of one border, curvature without 3D transforms, two components trailing the camera and the stride, and baking the aperture glow so it stops costing a render target a frame.
A paper doll, and 3D items in a gridA character in a profile frame and meshes in inventory cells: isolating a capture without a staging area, the premultiply trap, and one rig feeding a page of targets.
A frosted glass windowA window frame that blurs what is behind it with backdrop-filter, with gloss, a streak and sharp contents.
The coloured screen edgeStanding in fire, taking a hit, running on low health: an inset box-shadow is the whole effect, states cross-fade while events animate, then bake the lot to textures, because a full-screen layer costs a render target every frame.
A weapon falloff graphA <line-graph> fed from a mock JSON file, then from game code.
A stamina wheelStamina represented on a wheel, with partial, extra and temporary wheels.
A sprite that copies the playerA pixel-art character on an angled HUD panel that walks, runs, jumps, ducks and skids with the player: packing frames, a bound <flipbook>, and picking the clip from character movement.

Reference

UI_CONVENTIONS.mdAuthoritative for capability. What RCSS supports, what is banned, and what silently does nothing. Read it before authoring anything real: RmlUi is close enough to CSS to mislead.
AGENTS.mdThe cold-start brief to hand an agent building UI in a project it has not seen.
What Folio does not do yetEvery known limit, in one place. Read it before designing around something.
InternalsBuild and engine-integration hazards. Not for authoring.
Building FolioBuilding the tools, the verification harness, and where everything is in the repository. For changing Folio itself.