PreviewView
  • August 1, 2025

Make use of SwiftUI previews for rapidly prototyping your UIViewControllers and UIViews!

The SwiftUI preview canvas is tied to a specific version of Xcode, not the the target OS version. This means you can make use of this utility even if you’re not targeting iOS 13 or higher, as long as you’re using Xcode 10 or higher.

My iOS deployment target is below iOS 13


If you’re targeting an iOS version earlier than iOS 13 then you may be get an error such as:

Compiling failed: ‘__designTimeString(_:fallback:)’ is only available in iOS 13.0 or newer

Other known variants may be:

  • __designTimeInteger(_:fallback:)
  • __designTimeBoolean(_:fallback:)
  • __designTimeFloat(_:fallback:)

To solve this issue this library provides another target, PreviewViewLegacyOSCompileFix, which adds functions annotated with @backDeployed(before:) so these functions exist on versions earlier than iOS 13.

In addition the normal import PreviewView and import SwiftUI imports alongside your PreviewProvider you will need to add import PreviewViewLegacyOSCompileFix to ensure the back deployed functions are present.

Don’t forget to mark your PreviewProvider with @available(iOS 13, *).

Installation


ou can manually drop the files into your project, or take a look at Apple’s documentation for adding Swift Packages in Xcode.

Adding this as a dependency on a Swift Package is not recommended as it will then force the dependency on anyone that consumes your library.

Previewing a view


struct YourViewController_Previews: PreviewProvider {
static var previews: some View {
ViewPreview(YourView())
.previewLayout(.fixed(width: 375, height: 86))
}
}

Important: Update the previewLayout values to be the typical size of your view.

Previewing a view controller


Standalone

struct YourViewController_Previews: PreviewProvider {
static var previews: some View {
ViewControllerPreview(YourViewController())
.edgesIgnoringSafeArea(.all)
}
}

If you wish to test a custom UINavigationController you can do so with ViewControllerPreview.

struct YourNavigationController_Previews: PreviewProvider {
static var previews: some View {
ViewControllerPreview(YourNavigationController())
.edgesIgnoringSafeArea(.all)
}
}

Embedded in a UINavigationController

struct YourViewController_Previews: PreviewProvider {
static var previews: some View {
NavigationControllerPreview {
YourViewController()
}
.edgesIgnoringSafeArea(.all)
}
}

The body content of the NavigationControllerPreview accepts an entire navigation stack, allowing your previews to show back bar button items, and even be navigatable in Live Preview.

struct DetailViewController_Previews: PreviewProvider {
static var previews: some View {
NavigationControllerPreview {
ListViewController()
DetailViewController()
}
.edgesIgnoringSafeArea(.all)
}
}

You can customise the navigation bar settings and toolbar settings of the navigation controller via the initializer parameters.

struct DetailViewController_Previews: PreviewProvider {
static var previews: some View {
NavigationControllerPreview(barStyle: .largeTitle, showsToolbar: true) {
ListViewController()
DetailViewController()
}
.edgesIgnoringSafeArea(.all)
}
}

Embedded in a UITabBarController

struct YourViewController_Previews: PreviewProvider {
static var previews: some View {
TabBarControllerPreview {
ViewControllerPreview(YourViewController())
}
.edgesIgnoringSafeArea(.all)
}
}

Displaying a single tab would be weird, so to allow your previews to closely match your real app you can provide the other tabs within the body.

struct YourViewController_Previews: PreviewProvider {
static var previews: some View {
TabBarControllerPreview {
PreviewBlankTabItem(title: “First”, image: UIImage(systemName: “capsule”))

ViewControllerPreview(YourViewController())

ViewControllerPreview(YourOtherViewController())
}
.edgesIgnoringSafeArea(.all)
}
}

You can even embed your view controllers in a navigation controller to get the full in-app experience.

struct YourViewController_Previews: PreviewProvider {
static var previews: some View {
TabBarControllerPreview {
PreviewBlankTabItem(title: “First”, image: UIImage(systemName: “capsule”))

NavigationControllerPreview {
YourViewController()
}

PreviewBlankTabItem(title: “Third”, image: UIImage(systemName: “diamond”))
}
.edgesIgnoringSafeArea(.all)
}
}

GitHub


View Github

YOU MIGHT ALSO LIKE...
FigmaPreviewSwiftUI

A Figma component preview for your SwiftUI views. You can use Figma components instead of real views within your app ...

SafePreviewDevice

Motivation At WWDC 2019, Apple announced SwiftUI a new library for building UI in a simple and fast way. Xcode’s ...

PreviewDevice

Requirements   Dev environment: Xcode 13+, macOS 12+ iOS 13.0+, macOS 10.15+, Mac Catalyst 13.0+, tvOS 13.0+, watchOS 6.0+ Usage

SwiftUIWheelPicker

Horizontal wheel picker for SwiftUI Requirements iOS 13.0+ Installation CocoaPods

PermissionsSwiftUI: A SwiftUI package to handle permissions

PermissionsSwiftUI displays and handles permissions in SwiftUI. It is largely inspired by SPPermissions. The UI is highly customizable and resembles an Apple style. ...