Overview
@uix/codegen transforms a UIXDocument into production-ready code for 7 platforms, design token files for 4 formats, and test suites for 2 frameworks.
Quick start
typescript
import { UIXCodegen } from '@uix/codegen';
const codegen = new UIXCodegen();
const result = codegen.generate(document, {
target: 'react',
styleStrategy: 'tailwind',
});
// result.files — array of generated files
// result.manifest — checksums, warnings, metadataPlatform renderers
| Platform | Output | Features |
|---|---|---|
| React | .tsx functional component | Hooks, typed props, token refs |
| Vue | .vue SFC | <script setup>, scoped styles |
| Angular | .ts @Component | TypeScript, template string |
| HTML | .html semantic markup | Inline styles, accessibility |
| React Native | .tsx RN component | StyleSheet, flexbox layout |
| Flutter | .dart StatelessWidget | Material, custom themes |
| SwiftUI | .swift View | Modifiers, color extensions |
Multi-platform generation
typescript
const result = codegen.generateMulti(document, ['react', 'flutter', 'swiftui']);
// Generates all three in one passToken writers
| Format | File | Use case |
|---|---|---|
| Tailwind | tailwind.config.ts | Web (React, Vue, Angular) |
| CSS Variables | variables.css | Any web project |
| Dart | tokens.dart | Flutter |
| Swift | Tokens.swift | SwiftUI / iOS |
Test generators
- Playwright — integration tests with semantic selectors
- Accessibility — a11y audit tests (ARIA roles, contrast, keyboard navigation)
Animation codegen
Animations defined in the UIXDocument are translated to platform-native code:
- Web — CSS @keyframes with reduced-motion media queries
- React Native — Animated.timing / Animated.spring
- Flutter — AnimationController + Tween
- SwiftUI — .animation() modifier
Style strategies
| Strategy | Description |
|---|---|
| tailwind | Tailwind CSS utility classes |
| css-modules | Scoped CSS module files |
| css-vars | CSS custom properties |
| inline | Inline style objects |