FlexUI CLI

HTML + Tailwind to Unity UI Toolkit converter

A lean, code-first CLI toolkit that converts HTML + Tailwind CSS into Unity UI Toolkit assets (UXML, USS, and C# builder classes). Perfect for teams who move fast in HTML/CSS and want Unity 6-ready UI without a heavy visual editor.

✨ Features

• 🎨 Web-native authoring — Write layouts in familiar HTML + Tailwind syntax
• 🎮 Unity-native output — Clean UXML/USS/C# that matches Unity 6 UITK APIs
• ⚡ Fast iteration — CLI/Watch mode for immediate rebuilds
• 🤖 AI Generation — Generate components from natural language prompts
• 🎯 Live Preview — Browser preview with hot reload
• 🎪 Interactive Playground — Storybook-like component browser
• ♿ Accessibility Analysis — Focus order and a11y hints
• 🎨 Theme System — Dark, light, cyberpunk, fantasy themes
• 📱 Responsive Variants — sm:/md:/lg: breakpoint support
• 🧩 Component Slots — Reusable components with slot composition
• ⚡ Animations — Transition utilities for smooth interactions
• 🔍 Built-in linting — Warns about unsupported Tailwind utilities

📦 Installation

npm install flexui-cli
# or
pnpm add flexui-cli
# or
yarn add flexui-cli

🚀 Quick Start

Initialize a project

npx flexui init

This creates:

• flexui.config.ts — Configuration file
• samples/MainMenu.html — Example UI template

Convert HTML to Unity assets

# Convert a single file
npx flexui convert samples/MainMenu.html --out ./out

# Watch for changes
npx flexui watch "samples/**/*.html" --out ./out

Output files

For MainMenu.html, you'll get:

• MainMenu.uxml — Unity UXML markup
• MainMenu.uss — Unity StyleSheet
• MainMenu.cs — C# builder class (optional)
• MainMenu.manifest.json — Asset references

🎯 All Commands

| Command | Description | | -------------------------- | ---------------------------------------- | | flexui convert <input> | Convert HTML file(s) to UXML/USS/C# | | flexui watch <glob> | Watch HTML files and rebuild on change | | flexui init | Initialize a new FlexUI project | | flexui lint <input> | Check for unsupported Tailwind utilities | | flexui preview <input> | Start live preview server | | flexui playground | Start interactive component browser | | flexui generate <prompt> | Generate UI from natural language | | flexui theme <name> | Generate theme stylesheets | | flexui tokens | Export design tokens | | flexui templates | Manage component templates | | flexui a11y <input> | Analyze accessibility | | flexui unity | Unity project integration | | flexui info | Show project information |

🤖 AI Component Generation

Generate UI components from natural language descriptions:

# Generate a login form
npx flexui generate "a login form with email and password"

# Generate with a specific theme
npx flexui gen "a health bar for my game" --theme cyberpunk

# Save to file
npx flexui gen "settings panel" --theme fantasy -o components/settings.html

Supported component types:

• Buttons, cards, forms, menus, modals
• Progress bars, health bars, mana bars
• Inventories, HUDs, settings panels
• Lists, headers, navigation

🎯 Live Preview

Preview your HTML with hot reload:

npx flexui preview samples/MainMenu.html --open

Features:

• Responsive size controls (mobile, tablet, desktop)
• Hot reload on file changes
• Unity-mimicking CSS styles

🎪 Interactive Playground

Browse and preview components in a Storybook-like interface:

npx flexui playground --dir ./components --open

Features:

• Component library browser
• Built-in templates included
• Code view (HTML/UXML/USS/C#)
• Theme switching

🎨 Theme System

Generate themed stylesheets:

# List available themes
npx flexui theme --list

# Generate a theme
npx flexui theme dark --out ./out
npx flexui theme cyberpunk --out ./out

Available themes:

• dark — Modern dark theme with indigo accents
• light — Clean light theme
• cyberpunk — Neon cyan on black
• fantasy — Warm amber tones

📱 Responsive Variants

Use Tailwind-style responsive prefixes:

<div class="flex-col md:flex-row lg:gap-8">
  <button class="w-full md:w-auto">Click me</button>
</div>

Generates USS with breakpoint-aware selectors:

.md #element-id {
  flex-direction: row;
}

⚡ Animation Support

Use transition utilities:

<button class="bg-blue-500 hover:bg-blue-600 transition duration-200">
  Hover me
</button>

Supported utilities:

• transition, transition-colors, transition-opacity
• duration-75/100/150/200/300/500/700/1000
• ease-linear/in/out/in-out
• delay-*

♿ Accessibility Analysis

Check accessibility and generate focus management:

npx flexui a11y samples/MainMenu.html --generate-focus

Features:

• Missing label detection
• Touch target size checks
• Color contrast estimation
• Focus order analysis
• C# FocusManager generation

🧩 Component Slots

Create reusable components with slots:

card.component.html:

<div class="card bg-slate-800 rounded-lg p-4">
  <slot name="header"></slot>
  <div class="card-body">
    <slot></slot>
    <!-- Default slot -->
  </div>
  <slot name="footer"></slot>
</div>

usage.html:

<component src="./card.component.html">
  <template slot="header">
    <h2>Card Title</h2>
  </template>
  <p>This goes into the default slot</p>
</component>

📝 HTML to UITK Element Mapping

| HTML Element | UITK Element | Notes | | ------------------------------ | --------------- | ----------------------- | | <div> | VisualElement | Container element | | <span>, <p>, <h1>-<h4> | Label | Text elements | | <button> | Button | Interactive button | | <input type="text"> | TextField | Text input | | <input type="password"> | TextField | With password="true" | | <input type="checkbox"> | Toggle | Boolean toggle | | <textarea> | TextField | With multiline="true" | | <select> | DropdownField | Dropdown selector | | <img> | Image | Image element |

🎨 Supported Tailwind Utilities

Layout

• flex, block, hidden
• flex-row, flex-col, flex-row-reverse, flex-col-reverse
• flex-wrap, flex-nowrap
• flex-1, flex-auto, flex-none, grow, shrink
• justify-start/end/center/between/around/evenly
• items-start/end/center/stretch
• gap-{size}, gap-x-{size}, gap-y-{size}

Spacing

• p-{size}, px-{size}, py-{size}, pt/pr/pb/pl-{size}
• m-{size}, mx-{size}, my-{size}, mt/mr/mb/ml-{size}

Sizing

• w-{size}, w-full, w-screen, w-auto, w-1/2, etc.
• h-{size}, h-full, h-screen, h-auto
• min-w-{size}, max-w-{size}, min-h-{size}, max-h-{size}

Colors (all Tailwind palettes)

• bg-{color}-{shade} — Background color
• text-{color}-{shade} — Text color
• border-{color}-{shade} — Border color

Typography

• text-xs/sm/base/lg/xl/2xl/3xl/4xl/5xl
• font-thin/light/normal/medium/semibold/bold/extrabold/black
• text-left/center/right
• italic, underline, line-through, uppercase, lowercase
• truncate, whitespace-nowrap

Borders

• border, border-{0/2/4/8}
• border-t/r/b/l
• rounded, rounded-sm/md/lg/xl/2xl/3xl/full

Effects

• shadow, shadow-sm/md/lg/xl/2xl/none
• opacity-{0-100}

Transitions

• transition, transition-colors, transition-opacity
• duration-*, delay-*, ease-*

Pseudo-classes

• hover:* — Hover state styles
• focus:* — Focus state styles
• active:* — Active state styles

Responsive

• sm:* — Small devices (640px+)
• md:* — Medium devices (768px+)
• lg:* — Large devices (1024px+)
• xl:* — Extra large (1280px+)

⚙️ Configuration

Create a flexui.config.ts (or .js, .json) file:

import { defineConfig } from "flexui-cli";

export default defineConfig({
  unity: {
    namespace: "Game.UI",
    assetRoot: "Assets/UI",
    generateCSharp: true,
  },
  tailwind: {
    configPath: "./tailwind.config.js",
    safelist: ["btn-primary"],
  },
  output: {
    outDir: "out",
  },
});

🧪 Testing

# Run tests
npm test

# Watch mode
npm run test:watch

📚 Architecture

HTML + Tailwind
    │
    ▼
[htmlparser2] → UI AST → [Tailwind mapper] → Styled AST
    │                                   │
    ├─> UXML generator                  ├─> USS generator
    └─> C# builder generator            └─> Asset manifest

✅ Implementation Status

Core Features ✅

• [x] CLI commands: convert, watch, init, lint
• [x] HTML parser → intermediate UI AST
• [x] Tailwind mapping (layout, spacing, sizing, colors, typography, borders)
• [x] Generators: UXML + USS + C# builder
• [x] Config loader with defaults
• [x] Golden fixture tests (121 tests)

Enhanced Features ✅

• [x] Animation/transition support
• [x] Responsive variants (sm:/md:/lg:)
• [x] Live preview server with hot reload
• [x] Interactive playground (Storybook-like)
• [x] AI component generation
• [x] Theme system (dark/light/cyberpunk/fantasy)
• [x] Accessibility analysis
• [x] Component slots for composition
• [x] Design tokens export
• [x] Unity project integration
• [x] 20+ built-in component templates

Coming Soon

• [ ] VSCode extension
• [ ] Figma import

📄 License

MIT