Stop rebuilding your designs in UMG.

VIDEO SHOWCASE

WebToUMG imports web designs — HTML/CSS, or a live URL — and converts them into native Unreal Motion Graphics widgets that you can edit, animate, and ship. Layouts become real UCanvasPanel/VerticalBox/HorizontalBox/UOverlay hierarchies. Gradients, shadows, and glows become parametric Material Instances. Hover, group-hover, and click transitions become UWidgetAnimation tracks. Inline SVG and complex effects are rasterized to high-resolution textures automatically.

Built for the modern AI-design workflow. WebToUMG handles outputs from Claude (Artifacts/Design), Google Stitch, Lovable Dev and standard hand-written HTML/CSS. Tailwind utility classes (including group-hover: and peer patterns), shadcn/ui-style markup, and oklch()/oklab() colors resolve correctly out of the box.

Three ways to import: drag a single .html file into the Content Browser, a ZIP containing a full multi-screen project (one page per folder → one Widget Blueprint each), or use Tools ▸ WebToUMG: Import Web Design… to pick a file or paste a public URL (Lovable preview or your local dev server). The plugin auto-detects entry points and names each Widget Blueprint from the page <title>.

State-aware capture. For JS/React apps where screens, modals, and tabs mount and unmount, WebToUMG drives the live page — clicking triggers and reloading to reach every reachable state — and emits each as native UMG: tab bars become a single UWidgetSwitcher, modals are embedded as in-place collapsible dialogs, and screen-to-screen navigation is wired with functional nav-links. No config file required.

Functional controls, not just pixels. Semantic form markup becomes interactive widgets: <input type="range"> → USlider, <input type="checkbox"> → UCheckBox, <select> → UComboBoxString, and custom Tailwind toggle switches become a working switch that slides its knob on click.

Refresh in place. Every import stamps its source. Right-click an imported Widget Blueprint → WebToUMG: Reimport to re-run the import on the same assets when the design changes — multi-page projects reuse the existing Blueprints by name (no duplicates). The widget tree is regenerated, but your Event Graph logic is preserved: widget names are stable across re-imports, so your bindings keep resolving.

Features

• Native UMG output — real Widget Blueprints, Material Instances, Textures, Fonts. No WebView wrapper. Edit anything after import.

• Tiered conversion — layouts and text as native widgets; gradients/shadows/glows as parametric Material Instances (3 master materials — fill, shadow/glow, noise — with deduplicated instance variations); inline SVG and complex effects baked as Texture2D.

• AI design tool support — works with output from Claude (Artifacts/Design), Google Stitch, Lovable Dev and hand-written HTML/CSS.

• Three import modes — drag .html/.zip into the Content Browser, or use the import panel for a file picker or a public URL (preview link / dev server).

• State capture (click-and-reload discovery) — for JS/React apps, the importer drives the live page to reach every screen/modal/tab and emits each as native UMG. Empirical, not source-parsing — works with any framework that renders to the DOM.

• Animations — CSS transition, :hover/:active, group-hover, and @keyframes → UWidgetAnimation tracks bound automatically.

• Multi-screen apps — tab bars → one UWidgetSwitcher; modals → embedded in-place collapsible dialogs; screen navigation → functional nav-links.

• Functional form controls — <input type=range> → USlider, <input type=checkbox> → UCheckBox, <select> → UComboBoxString, Tailwind toggle switches → a working knob-sliding switch.

• Reimport in place — right-click → Reimport re-runs from the stamped source; reuses existing Blueprints by name; widget names stay stable so your Event Graph keeps working.

• 16 font families bundled (+ Material Symbols) — Inter, Roboto, Geist, Montserrat, Poppins, Nunito, Space Grotesk, Oswald, Barlow Condensed, Bebas Neue, Black Ops One, Anton, Cinzel (serif), and the mono cuts. Common designs need no network.

• Modern CSS — oklch()/oklab() colors (incl. inside var()) converted to sRGB for the bundled Chromium 90 engine; multi-stop & layered gradients; per-side borders.

• Editor-only plugin — zero runtime overhead. Imports are one-shot; output is plain UMG.

Compatibility

Engine Version: Unreal Engine 5.5+
Supported Platforms (Editor): Windows, macOS
Target Platforms (Output): Any platform UMG supports (all)
Required Plugins: WebBrowserWidget (enabled by default in UE 5.5+), UMG
Network: Required only for URL import and for pages that load remote images/CSS. Local file/ZIP imports of self-contained pages work fully offline.

Fidelity

WebToUMG aims for a faithful, editable reproduction — not a screenshot. Layout, text, color, gradients, shadows/glows, borders, fonts, hover/keyframe animations, and the supported form controls convert with high fidelity. A focused set of effects approximate or bake to a texture (listed below) — by design, since they have no native UMG equivalent. We avoid promising a fixed "pixel-perfect %" because it depends entirely on which CSS a given design uses; see Limitations for the exact trade-offs.

Limitations

What WebToUMG doesn't do (be aware before purchasing):

• Runtime JavaScript logic (game logic, fetch, data binding) — not converted. Visual states/modals/tabs ARE captured; the behavior behind custom buttons is yours to wire in Blueprint.

• Cross-screen navigation between separately-generated pages — auto-wired only when the importer can reach a screen by clicking; unrelated pages in a ZIP don't auto-link (add data-d2w-name/href to link them).

• Responsive design — imports at a single (Desktop) viewport. Multi-viewport variants are on the roadmap.

• CommonUI components — plain UMG only; convert to CommonUI manually if needed.

• Non-.ttf fonts / families outside the bundled set — fall back to a default; provide a .ttf or pick a bundled family.

• CSS-art (shapes built from nested <div>+clip-path/organic border-radius), conic/repeating gradients, filter:, multiple text-shadow — approximated or skipped; use a single <svg>/<img> (or the data-d2w-tier="4" bake escape hatch).

• Chromium-90 engine ceiling — color-mix(), :has(), container queries, position:sticky are unsupported (the bundled CEF predates them).

• Reimport replaces the widget tree — manual edits to the imported widget layout are overwritten on Reimport (Event Graph logic is preserved). A merge-preserving refresh is on the roadmap.