Flux
Universal UI Modeling Language
Define your interface components once and generate native implementations for every platform. Stop rewriting the same UI for React, SwiftUI, and Jetpack Compose. Maintain perfect design consistency across web, iOS, and Android—automatically. Built to work seamlessly with AI coding agents.
Design Once, Deploy Everywhere
Build your UI components once in Flux and generate native implementations for React, Vue, SwiftUI, Jetpack Compose, and more. No more rewriting the same component for every platform. Maintain design consistency effortlessly across web, iOS, and Android.
Iterate Faster, Ship Confidently
Update a component in Flux and regenerate implementations across all platforms instantly. Test changes across your entire product ecosystem in minutes, not days. Reduce cross-platform bugs and design inconsistencies that come from manual implementation drift.
Designer-Developer Harmony
Designers define component behavior and layout in Flux. Developers generate platform-specific implementations automatically. No more "it looked different in Figma" conversations. Design systems stay synchronized, and everyone speaks the same language about UI structure and behavior.
Supported Platforms
Why Flux?
Stop rewriting UIs for every platform. Define your interface once and let Flux handle the rest.
AI-First Design
Optimized for LLM coding agents to generate, while remaining perfectly human-readable. The ideal target for AI-assisted development workflows.
True Cross-Platform
One UI definition that generates native code for web (React, Vue, Next.js) and mobile (SwiftUI, Jetpack Compose, React Native).
Framework-Native Output
Generates idiomatic code for each framework. Not a runtime abstraction - real React, real SwiftUI, real Jetpack Compose.
Plugin Architecture
Connect to backends generated by Smithy, Capacitor, or any API. Flexible plugin points for data binding and business logic.
Type Safety
Full type safety across all generated code. Props, state, and callbacks are all type-checked by a linter.
Design System Integration
Define your design system once - colors, typography, spacing - and apply consistently across all platforms.
The Complete Software Factory
Flux is part of the generative domain language ecosystem. Define your entire stack in generative domain languages and generate production-ready implementations.
Chronos
Universal requirements language. Define journeys, actors, and outcomes once.
Learn about Chronos →Flux
Universal UI modeling language. Define your interfaces once, render everywhere.
You are hereCapacitor
Universal data modeling language. Define your database schemas once.
Learn about Capacitor →Fusion
Universal IaC language. Define your infrastructure and deployment pipelines once.
Learn about Fusion →Smithy
Protocol-agnostic API definition. Generate clients and servers for any language.
Visit Smithy.io →LikeC4
Architecture as code. Define system topology and boundaries, generate interactive diagrams.
Visit LikeC4.dev →The Complete Stack
Chronos
Requirements Layer
Flux
UI Layer
Capacitor
Data Layer
Fusion
Infrastructure Layer
Smithy
API Layer
LikeC4
Architecture Layer
How It Works
Flux follows the generator philosophy. Define your UI in a generative domain language, generate framework-specific implementations.
Define Your UI
Write your UI components in Flux's declarative syntax. Define layouts, styles, props, and interactions.
component Button {
props: {
label: String,
onClick: Handler
}
}Generate Code
Run the Flux CLI to generate native implementations for your target platforms.
$ flux generate \
--target react,swift \
--output ./gen
✓ React components
✓ SwiftUI viewsUse Everywhere
Import generated components in your web and mobile apps. Native performance, native feel.
// React
import {Button} from './gen'
// SwiftUI
import FluxGeneratedSupported Platforms
Generate native code for the most popular web and mobile frameworks.
React
Generate functional React components with hooks
Vue
Vue 3 composition API components
Next.js
Server and client components for Next.js
SwiftUI
Native iOS and macOS views
Jetpack Compose
Modern Android UI toolkit
React Native
Cross-platform mobile with JavaScript
Getting Started
Get up and running with Flux in minutes.
1. Install Flux CLI
$ npm install -g @fluxui/cli
# or
$ brew install flux2. Define Your First Component
component Button {
props: {
label: String,
variant: "primary" | "secondary",
onClick: Handler
}
styles: {
padding: 12 24,
borderRadius: 8,
fontSize: 16
}
}3. Generate for Your Platform
# Generate React components
$ flux generate --target react --output ./src/components
# Generate SwiftUI views
$ flux generate --target swiftui --output ./iOS/Views
# Generate multiple targets
$ flux generate --target react,vue,swiftui,compose4. Use in Your App
import { Button } from './components';
function App() {
return (
<Button
label="Click me"
variant="primary"
onClick={handleClick}
/>
);
}Next Steps
- Read the full documentation
Complete guide to Flux's syntax and features
- Explore example projects
Real-world apps built with Flux
- Integrate with Capacitor for full-stack generation
Connect your UI to type-safe data models