Converts HTML + CSS layouts into Unity UI Toolkit USS and UXML.
npm install -g html2uuitk# Basic usage npx html2uuitk --input index.html --css styles.css --output ./output # Multiple files npx html2uuitk -i page1.html page2.html --css base.css theme.css -o ./output # With reset CSS and config npx html2uuitk -i index.html --css styles.css --reset reset.css --config config.json -o ./output| Argument | Alias | Type | Required | Description |
|---|---|---|---|---|
--input | -i | array | Yes | Input HTML files |
--css | array | Yes | CSS files to convert | |
--reset | string | No | Reset CSS file | |
--output | -o | string | Yes | Output folder |
--config | -c | string | No | Configuration file (JSON) |
--help | Show help |
| HTML | UXML |
|---|---|
div, section, nav, header, footer, main, aside, article, ul, ol, li, img | ui:VisualElement |
p, span, a, h1–h6, label, strong, em, small, code, b, i, mark, abbr, cite, q, time | ui:Label |
input[type="text"], textarea | ui:TextField |
input[type="checkbox"] | ui:Toggle |
input[type="radio"] | ui:RadioButton |
input[type="range"] | ui:Slider |
input[type="number"] | ui:IntegerField |
button | ui:Button |
select | ui:DropdownField |
progress | ui:ProgressBar |
Elements like script, style, head, form, svg, canvas, audio, video, and iframe are skipped. Table elements (table, tr, td, etc.) and other HTML-only elements produce warnings.
The tool supports 73+ USS properties and handles these transformations:
Property mappings:
font-family→-unity-fonttext-align→-unity-text-alignfont-style→-unity-font-stylefont-weight→-unity-font-style
Value mappings:
| CSS | USS |
|---|---|
text-align: left | -unity-text-align: middle-left |
text-align: center | -unity-text-align: middle-center |
text-align: right | -unity-text-align: middle-right |
display: block/grid/inline-* | display: flex |
overflow: auto/scroll | overflow: hidden |
position: fixed | position: absolute |
font-weight: 600+ | -unity-font-style: bold |
Unit conversions:
rem/em→px(base 16px)vw/vh→%letter-spacingvalues are doubled for Unity- Leading decimals fixed:
.5px→0.5px - Modern color syntax normalized:
rgb(0 0 0 / 0.5)→rgba(0, 0, 0, 0.5)
CSS shorthands are expanded into individual USS properties:
- margin/padding — 1 to 4 value shorthand (e.g.
margin: 10px 20px→ individual sides) - border-radius — 1 to 4 value shorthand → individual corners
- border —
border: 1px solid #000→border-width+border-color - font —
font: italic bold 16px/1.5 Roboto→ individual font properties - background —
background: #fff url(bg.png) no-repeat→ individual background properties
box-shadow: 2px 4px 8px rgba(0,0,0,0.3);Maps to USS custom shadow properties: --unity-shadow-offset-x, --unity-shadow-offset-y, --unity-shadow-blur-radius, --unity-shadow-color.
Supported: :hover, :active, :focus
Unsupported pseudo-classes and pseudo-elements (::before, ::after, :nth-child(), etc.) are discarded with warnings.
CSS custom properties (var()) are supported with:
- Variable extraction from
:rootand other rules - Chain resolution (
var(--a)→var(--b)→ final value) - Fallback values:
var(--missing, #ff0000) - Circular reference detection
By default, var() references are preserved in the USS output. Enable substituteVariables in config to inline the resolved values.
When multiple selectors map to the same USS output (e.g. h1, h2, h3 all become Label), duplicate rules are automatically deduplicated.
The config file is optional. All options have sensible defaults.
{ "assets": { "Roboto": { "path": "Assets/Fonts/Roboto-Regular.asset" } }, "options": { "uppercase": false, "substituteVariables": false, "focusable": false } }| Option | Type | Default | Description |
|---|---|---|---|
uppercase | boolean | false | Convert text content to uppercase in UXML |
substituteVariables | boolean | false | Replace var() references with resolved values |
focusable | boolean | — | Set focusable attribute on input elements |
assets | object | {} | Map font names to Unity asset paths |
Map CSS font names to Unity asset paths:
{ "assets": { "Roboto": { "path": "Assets/Fonts/Roboto-Regular.asset" } } }Before:
.text { font-family: 'Roboto'; }After:
.text { -unity-font: url("Assets/Fonts/Roboto-Regular.asset"); } To find Unity asset paths, select the font asset in Unity's Project window and use right-click → "Copy Path".
Properties not supported by USS (e.g. cursor) are skipped with warnings during conversion.