DockUI: Design for SwiftUI

Design visually, Generate SwiftUI.

Features

  • Visual Interface Builder: Compose interfaces using editable components, nested containers, and modifiers.
  • SwiftUI Code Generation: Convert the design’s component hierarchy into SwiftUI source code.
  • Layers & Pages: Organize components, manage selection, and build multi-page designs.
  • Property Inspector: Customize typography, colors, spacing, dimensions, and visual effects.
  • AI-Assisted Editing: Generate and modify interfaces through natural-language instructions.
  • Flexible Canvases: Design layouts for phone screens, widgets, and custom canvas dimensions.
  • Design Persistence: Save documents locally or through iCloud Drive, with local fallback when iCloud is unavailable.
  • Image Export: Capture designs as images and generate lightweight document previews.
  • SF Symbols Browser: Explore native symbols and configure their appearance.
  • Adaptive Interface: Platform-specific navigation, toolbars, inspectors, and canvas interactions.
  • Appearance Support: Preview designs in light and dark modes.

Architecture

The app uses a feature-organized SwiftUI architecture with observable state, dedicated services, and separate rendering and code-generation layers.

  • Models: UIComponent, DesignPage, and DesignFile represent editable designs and their persistence format.
  • Views: Feature-specific SwiftUI interfaces for the editor, canvas, inspectors, library, and design browser.
  • State Management: Observable objects coordinate component changes, selection, viewport state, and document management.
  • Services: Dedicated integrations for AI editing, purchases, image search, and design publishing.
  • Platform Layer: Shared abstractions and conditional implementations bridge UIKit and AppKit.

Technical Stack

  • Language: Swift
  • UI Framework: SwiftUI, with UIKit and AppKit integration
  • State Management: Combine, ObservableObject, and @Published
  • Concurrency: Swift concurrency, actors, and background dispatch queues
  • Persistence: Codable JSON documents, FileManager, and iCloud Drive
  • Backend: Supabase
  • Subscriptions: RevenueCat
  • Image Loading: URLSession, URLCache, NSCache, and ImageIO
  • Platforms: iOS/iPadOS 18+ and macOS 15.6+

Key Engineering Decisions

  • Shared Component Model: Rendering, code generation, and persistence operate on the same recursive design structure.
  • Separated Viewport State: Zoom and pan state are isolated from document state to limit unnecessary editor updates.
  • Background Document Saving: Capture value snapshots before encoding and writing documents on a serial background queue.
  • Native Image Pipeline: Actor-isolated image loading combines request deduplication, memory and disk caching, and image downsampling.
  • Separate Preview and Export Paths: Bound thumbnail resolution while preserving higher-resolution design exports.
  • Platform-Adaptive Controls: Reuse core editing logic while adapting presentation and input handling to each platform.