html2uuitk

Converts HTML + CSS layouts into Unity UI Toolkit USS and UXML.

Installation

npm install -g html2uuitk

Usage

# 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

Arguments

| 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 |

Features

HTML to UXML Element Mapping

| 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.

CSS to USS Property Conversion

The tool supports 73+ USS properties and handles these transformations:

Property mappings:

• font-family → -unity-font
• text-align → -unity-text-align
• font-style → -unity-font-style
• font-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-spacing values 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)

Shorthand Expansion

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

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.

Pseudo-Classes

Supported: :hover, :active, :focus

Unsupported pseudo-classes and pseudo-elements (::before, ::after, :nth-child(), etc.) are discarded with warnings.

CSS Variables

CSS custom properties (var()) are supported with:

• Variable extraction from :root and 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.

Rule Deduplication

When multiple selectors map to the same USS output (e.g. h1, h2, h3 all become Label), duplicate rules are automatically deduplicated.

Configuration

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 |

Asset Mapping

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".

Unsupported Properties

Properties not supported by USS (e.g. cursor) are skipped with warnings during conversion.