1
Load the source
Paste HTML into the source area, open a local .html file, or load the built-in example. The preview reflects what the converter actually sees, so preview problems should be fixed in the HTML first.
This guide covers the current converter workflow, what it supports well, where it still needs manual cleanup, and how to prompt AI tools so the generated HTML is much more conversion-friendly from the start.
The pipeline has two parts: the browser-side converter builds JSON plus textures, then the Unreal plugin imports that package and reconstructs the widget hierarchy inside your project.
Paste or load HTML, choose a target resolution, bake textures when needed, and export a JSON package with all generated assets.
Import the JSON package, map fonts, create textures at the expected paths, and generate the final Widget Blueprint.
Paste HTML into the source area, open a local .html file, or load the built-in example. The preview reflects what the converter actually sees, so preview problems should be fixed in the HTML first.
Use the resolution dropdown for the exact canvas size you want in Unreal. Widget coordinates and exported textures are measured against that resolution.
Shadows, Gradients, Font Icons, and Animations control which visual systems are baked or exported. Leave them on unless you are deliberately simplifying the output.
Generate the widget, inspect the texture list, and verify the preview. Use the exported JSON package as the main handoff format for the Unreal plugin.
Best practice: If the preview is wrong, the Unreal output will usually be wrong too. Fix the HTML, CSS, asset path, or prompt first, then regenerate.
Use the JSON package export. It contains the widget description plus all baked textures and is the cleanest path into the plugin.
Open the plugin window in Unreal, choose the ZIP or JSON source, map fonts, select the destination asset path, then create the widget.
Absolute layout, flex, grid, scrollable containers, nested panels, tab-style panel stacks, and toggleable panel sections are handled well when the DOM structure is explicit.
Solid fills, gradients, rounded corners, borders, box shadows, background images, inline SVG, pseudo decorative layers, and simple clip-path shapes can be preserved or baked.
Buttons, text, images, inputs, checkboxes, sliders, combo boxes, scroll boxes, progress bars, and details/summary structures all have direct export paths. CSS keyframe animation data is also exported.
:hover treatment becomes a perfect UMG hover state. Keep the base state strong on its own.backdrop-filter, mask-image, and heavy blend chains are risky.If you use Claude, ChatGPT, Gemini, or another model to generate UI HTML, the prompt matters a lot. The goal is not just pretty HTML, but HTML that converts into Unreal cleanly.
Use this when you want the model to generate a full game screen from scratch with strong visual direction and Unreal-friendly structure.
Create a single self-contained 1920x1080 HTML game UI screen for Unreal Engine 5 UMG conversion. The theme is a futuristic sci-fi loadout screen with a left navigation rail, a center character equipment panel, a right stats panel, and a bottom action bar. Use valid standalone HTML with embedded CSS and optional embedded JavaScript. Return only the final HTML code. The UI should feel polished, game-ready, and visually strong, but also conversion-friendly: - use real buttons for interactive controls - keep important text and icons as real DOM elements - mark every real panel section with data-ue-panel - use data-ue-toggle on any control that switches or opens a panel - if a panel starts open, add data-ue-panel-default="open" - if a panel starts closed but should still export, add data-ue-panel-display - keep panel content inside the panel DOM container - use clean ids and class names - avoid fragile web-only tricks Include: - a main equipment panel - a stats/details panel - a tabbed sub-panel for weapons / armor / gadgets - a scrollable inventory list - a few clear action buttons - keyboard hints at the bottom - subtle CSS hover states - light CSS animation if useful Keep it visually impressive but structurally simple enough to convert well.
Create a self-contained 1920x1080 HTML game UI for Unreal Engine 5 UMG conversion. Make it a sci-fi inventory/loadout screen with clear panels, real buttons, scrollable lists, keyboard hints, and clean CSS hover states. Use data-ue-panel for every major panel and data-ue-toggle for any control that switches panels. Return only valid final HTML.
Create a single self-contained HTML game UI for Unreal Engine 5 UMG conversion at 1920x1080. Return only valid final HTML with embedded CSS and optional embedded JavaScript. Rules: - use clear ids and class names - give the body or main root a meaningful id or class - mark every real panel/screen/popup/tab/inventory/settings section with data-ue-panel - if a panel starts open, add data-ue-panel-default="open" - if a panel starts closed but must still export, add data-ue-panel-display="block", "flex", or "grid" - any control that opens or closes a panel must include data-ue-toggle - keep important exportable UI in the DOM at initial render - keep panel children as real DOM children of the panel container - prefer native elements such as button, input, select, textarea, details/summary - if a non-button element is clickable, add role="button", tabindex, data-action, or onclick - do not rely on cursor:pointer alone - for switchable sections or tabs, keep each major state as a real panel in the DOM - use non-destructive state changes such as class toggles, aria-hidden changes, or panel root display changes - do not create important exportable content only after a click - keep z-index logical and keep clickable elements above decorative layers - keep button captions simple, preferably in one label span - do not place essential labels, icons, counts, or values only in pseudo-elements - use overflow-y:auto or overflow-y:scroll for scrollable areas - prefer CSS hover states and CSS @keyframes animations - avoid fragile CSS such as backdrop-filter, mask-image, heavy mix-blend-mode, complex 3D transforms, and overly experimental tricks - avoid destructive DOM operations such as element.remove() or replacing major UI sections after load - prioritize stable, explicit, conversion-friendly HTML over clever web patterns
Create a self-contained 1920x1080 HTML game UI optimized for Unreal Engine 5 UMG conversion. Use clear ids, real buttons, native controls where possible, explicit data-ue-panel and data-ue-toggle attributes, simple button labels, real DOM content for important visuals, and conversion-friendly CSS. Keep all major UI in the DOM at initial render and avoid fragile web-only effects.
Use this section to show successful conversions, before/after comparisons, or screenshots of imported widgets in Unreal. Replace the placeholders below with your own images.
Replace this block with an <img> tag or background image when you add your screenshot.
Good place for a panel-heavy UI example, especially one with toggles, tabs, or scrollable sections.
Use this slot for a Designer screenshot, Blueprint result, or side-by-side preview.
Tip: if you want real image slots immediately, replace each .gallery-media block with an <img src="..." alt="..."> element and add your file paths.