PLUGIN 001 / SHIPPINGUNREAL ENGINE 5.8 · V1.0.0

Same HTML.
Native UMG.

Design game UI as HTML with Tailwind — by hand or with your coding agent — and import it as a plain Widget Blueprint. No web view, no JavaScript runtime, nothing of the plugin ships in your game.

$12.99PERSONAL · $19.99 PRO · FULL SOURCE ▶ WATCH 2:24 GET IT ON FAB

CHROME · HTML + TAILWIND UNREAL 5.8 · NATIVE UMG

456WIDGETS, 27 LEVELS DEEP

4.5/255MEAN PIXEL DIFFERENCE

1PXTEXT BOX VERTICAL DRIFT

0 · 0WARNINGS · ERRORS

FOOTAGE · 2:24The whole loop, start to finish: a design in the browser, the import, and the same screen running as a native widget in Unreal. About 30 minutes of work, shown at 25x.

01 / THE LOOP

An agent can run the whole thing.

Every artefact below is real output from the screen above — not a diagram of how it might work.

STAGE 01IMAGE

Start from a picture

A mockup goes in. The from-image and screen skills reconstruct it as HTML — screen takes it all the way to a finished widget in one call.

The original ORION Protocol main menu mockup used as the input image.

STAGE 02HTML

Plain markup comes out

Ordinary HTML and CSS a person can read and edit. No proprietary format, no lock-in — the design stays a web document.

<!-- orion_menu.html -->
<div class="mission-copy column">
  <p class="mission-label"
     data-loc="PrimaryMissionLabel">
    PRIMARY MISSION
  </p>
</div>

STAGE 03REPORT

The import answers in JSON

Coded diagnostics and counts, so an agent can check its own work instead of asking a human whether it looks right.

// the ORION menu above, as imported
"widgetName": "WBP_MainMenu",
"status": "ok",
"elements": 192,  "widgets": 456,
"maxDepth": 27,
"warnings": 0,  "errors": 0
HTML010 info  Preview-only script skipped
MAP003  info  environment.png recorded

02 / FIDELITY

Measured, not eyeballed.

"Close enough" is not a specification. The render harness is gamma-correct and has a ground-truth window mode, so every number here is something you can reproduce.

The ORION Protocol main menu rendered in Chrome and in Unreal, side by side. — PLATE A · REAL SCREENA real screen, not a test fixture: **456 widgets, 27 levels deep, 24 textures, zero warnings, zero errors**. Mean pixel difference **4.5 of 255**; every text box within **1px vertically** once the font is imported.

Gradient, fade and vignette probes rendered in Chrome and in Unreal, visually indistinguishable. — PLATE B · GRADIENTSGradients, fades and vignettes. sRGB blending matched to Chrome **within 1/255** — the smallest difference an 8-bit channel can express. Native UI materials, not baked textures.

A combat HUD rendered in Chrome and in Unreal, side by side. — PLATE C · COMBAT HUDThe demo combat HUD, 93 widgets. About **1% of pixels differ**, and they are glyph edges — the residue of two different text rasterisers, not layout drift.

03 / COVERAGE

What converts.

Layout

✓ NATIVE

Flex and grid, absolute positioning mapped to canvas anchors, spacers where justify-content needs them.

Gradients

✓ NATIVE

Linear and radial, up to three stops, CSS corner rule — as native UI materials.

Fonts

✓ NATIVE

Resolved from font-family or @font-face into Font Face and composite Font assets. Metrics match.

Surfaces

✓ NATIVE

Backgrounds, borders, radius, opacity, backdrop blur.

Controls

✓ NATIVE

Buttons with hover, pressed and disabled states. Progress bars. Form controls.

Images

✓ NATIVE

Imported as UI textures, with object-cover and object-contain via Scale Box.

Tailwind

✓ NATIVE

v3 and v4 utilities and variants, expanded natively — no Node, no compiler, no network.

Text

✓ NATIVE

Typography, inline runs flattened predictably, String Table localization out of the box.

SVG

✓ NATIVE

Inline svg and img src="*.svg" rasterised to UI textures at 2x: paths, arcs, strokes, gradients, viewBox.

Stylesheets

✓ NATIVE

Local link rel="stylesheet" files loaded in document order, with their @imports spliced in.

Transforms

✓ NATIVE

rotate, scale and px translate to the render transform; translate(-50%,-50%) to slot alignment.

Blur

✓ NATIVE

backdrop-filter: blur() becomes a native Background Blur with the same radius.

And what it refuses, on purpose

JAVASCRIPT@MEDIAPSEUDO-ELEMENTSCSS ANIMATIONSSIBLING SELECTORSREMOTE STYLESHEETSBOX-SHADOW

A converter that silently half-supports a feature is worse than one that tells you it will not touch it — every refusal here is a coded diagnostic, not a surprise at runtime. The full element-by-element list is in the support matrix.

04 / RE-IMPORT

Your Blueprint logic survives the redesign.

Widgets are matched by name and class and reused in place, so the Event Graph you wired last week still points at the same nodes after the designer moves a panel.

THE DIFF IT REPORTSEXAMPLE

+ added      Modal            Border
= kept       HUD              SizeBox
= kept       PlayerName       TextBlock
= kept       HealthRow        HorizontalBox
~ reclassed  Icon    Image -> Image
- removed    LegacyBadge      TextBlock

THE HEADER IT GENERATESFROM THE ORION IMPORT

// Generated. Do not edit: re-import instead.
// Source: main_menu.html

UPROPERTY(BlueprintReadOnly, meta = (BindWidget))
TObjectPtr<UTextBlock> PlayerName;

UPROPERTY(BlueprintReadOnly, meta = (BindWidget))
TObjectPtr<USizeBox> DeployButton;

/** Raised by DeployButton_Box (Button). */
UFUNCTION(BlueprintImplementableEvent, Category = "Web UI")
void OnDeploy();

05 / GUARANTEES

Studio-grade, or it does not ship.

Zero runtime

Both modules are editor-only. A cooked build contains no trace of the plugin — nothing to strip, nothing to license at runtime.

▸ absent from cooked builds

Deterministic

A manifest sits next to your HTML, diffable in code review. The same input produces the same widget, so a re-import is reviewable rather than mysterious.

▸ plan hash per import

Headless

A CLI and a commandlet with a JSON report and coded diagnostics. It belongs in CI as easily as in the editor.

▸ 21 automation contracts on UE 5.8

06 / LICENCE

Same plugin. Two licences.

Both tiers get the identical download: full source, the CLI, the demo content and the activation code for the agent skills. The tier is set by Fab's Standard License and depends on who is buying.

TIER 01FAB STANDARD LICENSE

Personal

$12.99

For individuals and small studios under Fab’s revenue threshold (US$100,000 gross in the last 12 months).

CHOOSE PERSONAL ON FAB ↗

TIER 02FAB STANDARD LICENSE

Professional

$19.99

For studios and companies above that threshold. Same files, same updates, same usage rights.

CHOOSE PROFESSIONAL ON FAB ↗

✓ FULL SOURCE ✓ 8 AGENT SKILLS · 365-DAY KEY ✓ NO RUNTIME ROYALTY ✓ REFUNDS VIA FAB

07 / REQUIREMENTS

Unreal Engine 5.8
Editor on Windows — Mac and Linux builds to follow
Python 3 for the headless CLI — standard library only, nothing to install
Output runs wherever UMG runs, at no runtime cost

DOCUMENTATION

Getting startedinstall, enable, first import Coding agentsthe eight skills CLIimport, render, verify Support matrixevery element and utility Diagnosticsevery coded warning Changelogversion by version

QUESTIONS

Does anything ship in my game?

No. The plugin is editor-only and absent from cooked builds.

Do I need Node or Tailwind installed?

No. Tailwind utilities are expanded natively inside the plugin.

Can I keep using the UMG designer?

Yes. Re-import reuses widgets by name, and tweaks on untouched properties survive.

Does it need JavaScript in my designs?

No. Behaviour is wired in C++ or Blueprint through the generated events.

Which agents work with it?

Any that runs a shell command and reads JSON — Claude Code, Codex, Cursor, OpenCode, Gemini CLI. Eight Agent Skills cover the loop (best-practices, design, from-image, screen, import, bind, reimport, diagnostics), served over MCP with a license key rather than shipped as files. Your activation code ships inside the download: paste it at mcp.digitalxbunker.com/activate and your key is issued instantly, with a ready-to-paste config for your tool. The importer itself needs no key and no network.

Can I see the source?

Yes. Full source ships with the plugin under the Fab EULA.

READY TO DEPLOY

Get Web
to Widget.

Sold through Fab under the Fab Standard License; refunds are handled by Fab. Questions: digitalxbunker@gmail.com.

$12.99 PERSONAL · $19.99 PROFESSIONAL GET IT ON FAB ↗

An agent can run the whole thing.

Start from a picture

Plain markup comes out

The import answers in JSON

Measured, not eyeballed.

What converts.

Layout

Gradients

Fonts

Surfaces

Controls

Images

Tailwind

Text

SVG

Stylesheets

Transforms

Blur

And what it refuses, on purpose

Your Blueprint logic survives the redesign.

Studio-grade, or it does not ship.

Zero runtime

Deterministic

Headless

Same plugin. Two licences.

Personal

Professional

Get Webto Widget.

Get Web
to Widget.