Home

[English] | [日本語]

SwiftJsonUI 7.2.0

The JSON-driven UI framework for iOS that now supports both UIKit and SwiftUI. Build native iOS interfaces using simple JSON definitions and automatic code generation.

🎉 What's New in 7.2.0

Resource Management System (August 31, 2025)

• 🎨 ColorManager: Centralized color management with automatic extraction from JSON layouts
• 🔤 StringManager: Automatic string extraction and localization support
• 📁 ResourceManager Directory: Generated Swift code for colors and strings
• 🔍 Undefined Resource Tracking: Track and manage undefined colors and strings
• 🔄 SwiftJsonUIConfiguration Integration: Improved colorProvider priority handling

Full 7.2.0 Release Notes

Previous: Collection Component Improvements (7.1.2)

• 🏗️ Section-Based Architecture: Redesigned CollectionDataSource for SwiftUI
• 📊 Flexible Layouts: Different column counts and cell types per section
• 🔄 Full Mode Support: Dynamic and Static modes work identically
• ↔️ Scroll Options: Horizontal/vertical with indicator controls

Full 7.1.2 Release Notes

Previous: Binding Properties (7.1.1)

• 🔄 Binding Properties: Use @propertyName syntax for two-way bindings
• 📝 JSON Binding: Bind to ViewModel with @{propertyName}

Full 7.1.1 Release Notes

Previous: Custom Components for SwiftUI (7.1.0)

• 🎯 SwiftUI Custom Components: sjui g converter generates custom components
• 📁 Three Files Generated: Swift component, Ruby converter, and Dynamic adapter
• 🔥 Hot Reload Support: Custom components work with hot reload

Full 7.1.0 Release Notes

🚀 What's New in 7.0

Dual Platform Support

Write once in JSON, deploy to both UIKit and SwiftUI:

• Unified JSON Format - Single definition works for both platforms
• Automatic MVVM Generation - ViewModels and data models created automatically for SwiftUI
• Smart Mode Switching - ViewSwitcher automatically optimizes for Debug/Release builds
• Full Feature Parity - All components work seamlessly across both platforms

Modern Architecture

• Restructured for Clarity - uikit and swiftui folders clearly separate implementations
• Enhanced CLI Tools - sjui_tools replaces binding_builder with expanded capabilities
• Improved Performance - Dynamic mode for development, static mode for production

📋 Requirements

• iOS 16.0+
• Swift 5.8+
• Xcode 14.0+
• Node.js (for development tools)

🎯 Quick Start

1. Install SwiftJsonUI

Add to your Package.swift:

dependencies: [
    .package(url: "https://github.com/Tai-Kimura/SwiftJsonUI.git", from: "7.2.0")
]

2. Install Development Tools

# One-line installer (recommended)
curl -fsSL https://raw.githubusercontent.com/Tai-Kimura/SwiftJsonUI/master/installer/bootstrap.sh | bash

# Or install specific version
curl -fsSL https://raw.githubusercontent.com/Tai-Kimura/SwiftJsonUI/master/installer/bootstrap.sh | bash -s -- -v 7.0.0

3. Initialize Your Project

cd sjui_tools

# Choose your platform
sjui_tools/bin/sjui init --mode uikit     # UIKit only
sjui_tools/bin/sjui init --mode swiftui   # SwiftUI only  
sjui_tools/bin/sjui init --mode all       # Both platforms

# Setup project structure
sjui_tools/bin/sjui setup

4. Create Your First View

For SwiftUI:

sjui_tools/bin/sjui g view HomeView --root

This generates:

• View/HomeView/HomeViewView.swift - Your editable view
• View/HomeView/HomeViewGeneratedView.swift - Auto-generated view
• ViewModel/HomeViewViewModel.swift - ViewModel with business logic
• Data/HomeViewData.swift - Data model
• Layouts/home_view.json - JSON layout definition

For UIKit:

sjui_tools/bin/sjui g view Home --root

This generates:

• View/Home/HomeViewController.swift - View controller
• Layouts/home.json - JSON layout
• Bindings/HomeBinding.swift - Generated bindings (after build)

5. Define Your Layout

Edit Layouts/home_view.json:

{
  "type": "SafeAreaView",
  "id": "main_container",
  "background": "#FFFFFF",
  "child": [
    {
      "type": "Label",
      "id": "welcome_text",
      "text": "Welcome to SwiftJsonUI 7.0!",
      "fontSize": 24,
      "fontColor": "#000000",
      "textAlign": "Center"
    },
    {
      "type": "Button",
      "id": "get_started",
      "text": "Get Started",
      "onClick": "handleGetStarted",
      "background": "#007AFF",
      "fontColor": "#FFFFFF",
      "cornerRadius": 8,
      "padding": [12, 24]
    }
  ]
}

6. Build and Run

# Generate bindings/views
sjui_tools/bin/sjui build

# Start hot reload for instant updates
sjui_tools/bin/sjui hotload listen

🏗️ Project Structure

SwiftUI Mode

YourApp/
├── Layouts/                      # JSON definitions
├── View/                         # SwiftUI views
│   └── HomeView/
│       ├── HomeViewView.swift          # Editable
│       └── HomeViewGeneratedView.swift # Auto-generated
├── ViewModel/                    # ViewModels
└── Data/                         # Data models

UIKit Mode

YourApp/
├── Layouts/                      # JSON definitions
├── View/                         # ViewControllers
├── Bindings/                     # Generated bindings
└── Core/                         # Base classes

🔥 Hot Reload Development

See your changes instantly without recompiling:

# Start the server
sjui_tools/bin/sjui hotload listen

# Edit any JSON file - changes appear immediately
# Works with both UIKit and SwiftUI

📱 Platform Support

All components work across both platforms:

Component	UIKit	SwiftUI
Label	✅ Full	✅ Full
Button	✅ Full	✅ Full
TextField	✅ Full	✅ Full
Image	✅ Full	✅ Full
ScrollView	✅ Full	✅ Full
Table/List	✅ Full	⚠️ Partial
Collection	✅ Full	✅ Full
And 20+ more...

🎨 JSON Layout System

Basic Structure

{
  "type": "View",
  "id": "my_view",
  "width": "matchParent",
  "height": "wrapContent",
  "child": [...]
}

Data Binding

{
  "data": [
    {
      "name": "userName",
      "class": "String",
      "defaultValue": "Guest"
    }
  ],
  "child": [
    {
      "type": "Label",
      "text": "@{userName}"  // Automatic binding
    }
  ]
}

Styles

Create reusable styles in Styles/:

{
  "background": "#007AFF",
  "fontColor": "#FFFFFF",
  "cornerRadius": 8,
  "padding": 12
}

Use in layouts:

{
  "type": "Button",
  "style": "primary_button",
  "text": "Click Me"
}

🔧 CLI Commands

# Project setup
sjui init [--mode uikit|swiftui|all]  # Initialize project
sjui setup                             # Create structure

# View generation
sjui g view <name> [--root]           # Generate view
sjui g collection <View>/<Cell>       # Generate collection cell
sjui g partial <name>                 # Generate reusable partial
sjui g converter <name> [options]     # Generate custom component
sjui d view <name>                    # Delete view

# Building
sjui build [--mode uikit|swiftui|all] # Generate code
sjui build --clean                     # Clean cache and rebuild

# Hot reload
sjui hotload listen                   # Start server
sjui hotload stop                     # Stop server

# Utilities
sjui convert to-group [--force]       # Xcode 16 compatibility

🎯 ViewSwitcher (SwiftUI)

Automatic optimization based on build configuration:

• DEBUG: Dynamic mode - reads JSON at runtime for rapid development
• RELEASE: Static mode - uses generated code for optimal performance

// Automatic in generated code
ViewSwitcher(
    isDynamicMode: isDynamicMode,
    dynamicView: { DynamicComponent(...) },
    staticView: { YourGeneratedView(...) }
)

📚 Advanced Features

Dynamic Variable Replacement

{
  "include": "header",
  "variables": {
    "title": "Welcome, @{userName}"
  }
}

Event Handling

{
  "type": "Button",
  "onClick": "handleTap",        // Method binding
  "onLongPress": {
    "closure": "handleLongPress",
    "duration": 0.5
  }
}

Collection Views

# Generate collection cell for UITableView/UICollectionView
sjui g collection ProductList/ProductCell

# This creates:
# - View/ProductList/Collection/ProductCell.swift
# - Layouts/product_cell.json

Partial Views (Reusable Components)

# Generate a reusable partial component
sjui g partial header

# Use in your layouts:
{
  "include": "header"
}

See Include-System for detailed documentation on using partials and includes.

🛠️ Configuration

UIViewCreator (UIKit)

Customize default values for all components:

class UIViewCreator: SJUIViewCreator {
    class func prepare() {
        defaultFont = "System"
        defaultFontSize = 14.0
        defaultFontColor = UIColor.label
        // Add your customizations
    }
}

Project Configuration

sjui.config.json:

{
  "project_name": "YourApp",
  "mode": "swiftui",  // or "uikit" or "all"
  "layouts_directory_name": "Layouts",
  "styles_directory_name": "Styles"
}

📖 Documentation

Core References

• All-Attributes - Complete attribute reference for all components
• View Types - All available component types
• Attributes - Core attribute system

Advanced Guides

• Data-Binding - Data binding system, expressions, and binding groups
• Include-System - Component composition and reusability
• Advanced-Features - Event handling, gestures, shadows, and more
• Converter-Command - Generate custom SwiftUI components

Development Tools

• VSCode-Extension - Official VSCode extension with autocomplete and templates
• External-Libraries-Integration - Integrate third-party libraries

Version Information

• SwiftJsonUI-7.2.0-Release-Notes - Latest release notes
• SwiftJsonUI-7.1.2-Release-Notes - Collection improvements
• SwiftJsonUI-7.1.1-Release-Notes - Binding properties release
• SwiftJsonUI-7.1.0-Release-Notes - Custom components release
• SwiftJsonUI-7.0.0-Changes - Detailed changelog for 7.0
• Component docs - Label, Button, TextField, etc.

🚀 Example Projects

bindingTestApp

Complete demo project showing SwiftJsonUI setup:

git clone https://github.com/Tai-Kimura/bindingTestApp.git
cd bindingTestApp
./bindingTestApp/clear_and_setup.sh

🔄 Migration Guide

From 7.0.x to 7.1.0

No code changes required - 7.1.0 is fully backward compatible with performance improvements.

From 6.x to 7.x

1. Update Package.swift to version 7.1.0
2. Rename binding_builder references to sjui_tools
3. Update binding folder references to uikit
4. Reinstall CLI tools with latest version
5. Choose your platform mode with sjui init --mode

💡 Best Practices

1. Choose Your Platform - Start with either UIKit or SwiftUI, add the other later if needed
2. Use Hot Reload - Dramatically speeds up UI development
3. Organize with Subdirectories - Group related layouts by feature
4. Create Reusable Styles - Define once, use everywhere
5. Leverage Data Binding - Use @{} syntax for automatic updates

🐛 Troubleshooting

Command not found:

# Ensure you're in sjui_tools directory
cd sjui_tools
# Make executable
chmod +x bin/sjui

Hot reload not working:

# Check Node.js installation
node --version
# Restart server
sjui hotload stop && sjui hotload listen

Build errors:

# Clean and rebuild
sjui build --clean
# Check JSON syntax
sjui validate

🔗 Related Projects

KotlinJsonUI

The Android counterpart to SwiftJsonUI, supporting Android Views, Jetpack Compose, and XML layouts:

• Repository: KotlinJsonUI
• Wiki: KotlinJsonUI Documentation
• Features: Same JSON format, cross-platform UI development
• XML Support: Component and Attribute Mappings

📬 Support

• Issues: GitHub Issues
• Wiki: Documentation
• Examples: Sample Projects

📄 License

SwiftJsonUI is available under the MIT license.