TachUISwiftUI for the Web

Quick Example ​

Create reactive UIs with SwiftUI-inspired syntax:

import { createSignal, VStack, Text, Button } from '@tachui/core'

const CounterApp = () => {
  const [count, setCount] = createSignal(0)

  return VStack({
    children: [
      Text(() => `Count: ${count()}`)
        .modifier
        .fontSize(24)
        .fontWeight('bold')
        .foregroundColor('#007AFF')
        .build(),

      Button('Increment', () => setCount(count() + 1))
        .modifier
        .backgroundColor('#007AFF')
        .foregroundColor('white')
        .padding(16)
        .cornerRadius(8)
        .scaleEffect(() => count() > 10 ? 1.1 : 1.0)
        .transition({ duration: 200 })
        .build()
    ],
    spacing: 16,
    alignment: 'center'
  })
    .modifier
    .padding(20)
    .frame({ maxWidth: 400 })
    .build()
}

Framework Architecture ​

TachUI provides a complete UI framework with three powerful packages:

🏗️ Core Package (@tachui/core) - 60KB ​

• 39 essential components - Text, Button, Image, Symbol, VStack, HStack, Grid, LazyVGrid, LazyHGrid, List, ScrollView
• 130+ modifiers - Layout, styling, interaction, animation, and visual effects
• Reactive system - Fine-grained signals with automatic cleanup
• Desktop support - Window management and multi-viewport applications

🧭 Navigation Package (@tachui/navigation) - +25KB ​

• 9 navigation components - NavigationStack, TabView, NavigationLink
• SwiftUI routing - Path-based navigation with type safety
• Multi-platform - Adaptive navigation for mobile and desktop

📝 Forms Package (@tachui/forms) - +35KB ​

• 24 specialized components - EmailField, CreditCardField, DatePicker
• Advanced validation - Built-in rules, custom validators, real-time feedback
• Accessibility - ARIA compliance and keyboard navigation

Performance & Bundle Size ​

TachUI delivers exceptional performance through modern architecture:

📊 Performance Metrics ​

• Fine-Grained Updates: Only changed properties trigger DOM updates, not entire components
• Memory Efficient: Automatic cleanup and minimal memory footprint
• Zero Virtual DOM: Direct DOM manipulation eliminates reconciliation overhead
• Compile-Time Optimized: Build-time optimizations eliminate runtime bloat

📦 Bundle Scaling ​

Core Only:        ~60KB  → Perfect for landing pages, blogs
Core + Navigation: ~85KB  → Ideal for single-page applications
Core + Forms:     ~95KB  → Great for data-heavy applications
Full Framework:   ~150KB → Complete multi-window desktop apps

🎯 Real-World Applications ​

• Calculator App (Core only): Production-ready with Apple-style design and reactive calculations

SwiftUI Developer Experience ​

Perfect for iOS developers transitioning to web - identical API patterns:

// SwiftUI
VStack(spacing: 16) {
    Text("Welcome to TachUI")
        .font(.title)
        .fontWeight(.bold)
        .foregroundColor(.blue)

    AsyncImage(url: URL(string: "/hero.jpg")) { image in
        image
            .resizable()
            .aspectRatio(16/9, contentMode: .fit)
            .cornerRadius(12)
    }

    Button("Get Started") {
        handleAction()
    }
    .buttonStyle(.borderedProminent)
}
.padding()
.navigationTitle("Home")

// TachUI - identical patterns
VStack({
  children: [
    Text('Welcome to TachUI')
      .modifier
      .font({ size: 'title' })
      .fontWeight('bold')
      .foregroundColor('blue')
      .build(),

    Image('/hero.jpg')
      .modifier
      .resizable()
      .aspectRatio(16/9, 'fit')
      .cornerRadius(12)
      .build(),

    Button('Get Started', handleAction)
      .modifier
      .buttonStyle('borderedProminent')
      .build()
  ],
  spacing: 16
})
  .modifier
  .padding()
  .navigationTitle('Home')
  .build()

Advanced Features ​

🎨 Visual Effects & Transforms ​

Complete CSS filter effects with reactive support:

Image('/photo.jpg')
  .modifier
  .blur(() => isLoading() ? 3 : 0)
  .scaleEffect(() => isHovered() ? 1.05 : 1.0)
  .rotationEffect(5, 'center')
  .transition({ duration: 300 })
  .build()

🖥️ Multi-Window Desktop Apps ​

Native desktop application patterns:

App({
  children: [
    Window({
      id: 'main',
      title: 'My App',
      content: () => MainView()
    }),

    WindowGroup({
      id: 'documents',
      title: 'Document',
      for: Document,
      content: (doc) => DocumentEditor({ document: doc })
    })
  ]
})

📱 Responsive Design ​

Mobile-first with desktop adaptation:

VStack({ children })
  .modifier
  .padding(() => isMobile() ? 16 : 24)
  .frame({ maxWidth: () => isDesktop() ? 800 : Infinity })
  .build()

Migration & Compatibility ​

From React ​

// React
const [count, setCount] = useState(0)
return <div onClick={() => setCount(c => c + 1)}>{count}</div>

// TachUI - nearly identical
const [count, setCount] = createSignal(0)
return Text(() => count()).modifier.onTap(() => setCount(c => c + 1)).build()

From SwiftUI ​

// SwiftUI
VStack(spacing: 16) {
    Text("Hello")
        .font(.title)
        .foregroundColor(.blue)
}
.padding()

// TachUI - identical API
VStack({
  children: [
    Text("Hello")
      .modifier
      .font({ size: 'title' })
      .foregroundColor('blue')
      .build()
  ],
  spacing: 16
})
  .modifier
  .padding()
  .build()

Development Experience ​

🛠️ Modern Tooling ​

• Vite Integration: Lightning-fast dev server and builds
• TypeScript: Complete type safety with intelligent autocomplete
• Testing: Comprehensive test suite with 95%+ coverage
• Documentation: Interactive examples and complete API reference

🎯 Quick Start Options ​

# Install TachUI CLI globally (once published)
npm install -g @tachui/cli
tacho init my-app

# Or add to existing project
npm install @tachui/core
# yarn add @tachui/core
# pnpm add @tachui/core

📋 Project Templates ​

• basic: Simple TachUI app with core components
• full-featured: Advanced template with @State, navigation, and TodoMVC example

Ready to Build? ​

Start building production-ready applications with familiar SwiftUI patterns:

• Get Started
• View Components
• Live Examples

Latest Release: v1.4 • Components: 71 • Modifiers: 130+ • SwiftUI Parity: 95% • Test Coverage: 95%+