RottenUITK

Convert HTML + Tailwind to Unity UI Toolkit (UXML/USS/C#).

Design game UI in HTML, preview in browser, compile to Unity with one click.

Installation

npm install -g @rotten-games/rotten-uitk

Quick Start

# Start the visual editor
rotten-uitk preview ./my-ui-folder --open

# Or compile directly
rotten-uitk convert MainMenu.html -o Assets/UI

Web Preview Features

The preview server gives you a complete UI development environment:

• File Browser - See all HTML files in your project
• Live Preview - See your UI instantly as you edit
• Size Presets - Mobile, Tablet, Desktop, Full
• Code View - See generated UXML, USS, C# side by side
• Compile File - One click to generate Unity files (Ctrl+S)
• Compile All - Generate all files at once (Ctrl+Shift+S)
• Watch Mode - Auto-compile on file changes
• Output Folder - Set your Unity output path (e.g., Assets/UI/Generated)

Workflow

1. Create HTML files with Tailwind classes
2. Run rotten-uitk preview . --open
3. Set output folder (e.g., Assets/UI/Generated)
4. Edit HTML in your favorite editor
5. Preview changes in browser
6. Click "Compile" or press Ctrl+S
7. See files in Unity

Example

Input: MainMenu.html

<div class="flex flex-col items-center justify-center h-full bg-zinc-900">
  <div class="text-4xl font-bold text-amber-500 mb-8">MY GAME</div>
  <button class="w-64 py-4 bg-amber-600 text-zinc-900 font-bold rounded">
    PLAY
  </button>
</div>

Output:

• MainMenu.uxml - Unity visual tree
• MainMenu.uss - Unity styles
• MainMenu.cs - C# bindings

HTML Guidelines

For best Unity compatibility:

<!-- Use flex for layout -->
<div class="flex flex-col w-full h-full">
  <!-- Use w-full h-full for root -->
  <div class="w-full h-full bg-zinc-900">
    <!-- Avoid complex CSS that Unity doesn't support -->
    <!-- Good: flex, padding, margin, colors, borders -->
    <!-- Avoid: grid, transforms, complex animations -->
  </div>
</div>

Supported Tailwind

Layout: flex, flex-col, flex-row, flex-1, items-*, justify-*, gap-* Sizing: w-*, h-*, w-full, h-full Spacing: p-*, m-*, px-*, py-* Colors: bg-*, text-*, border-* Typography: text-xs/sm/base/lg/xl/2xl/3xl/4xl, font-bold Borders: rounded, border, border-* States: hover:*

CLI Commands

# Visual development
rotten-uitk preview <folder> [--open] [-o output]

# Direct conversion
rotten-uitk convert <file> [-o output]

# Watch mode (CLI)
rotten-uitk watch <folder> -o output

# Templates
rotten-uitk templates [list|copy]

Requirements

• Node.js 18+
• Unity 2021.3+ with UI Toolkit

License

MIT