Getting Started with SwiftUI Previews

Written by Team Kodeco

SwiftUI previews provide developers a quick glance of their user interface without the need to run the entire application. This instant feedback mechanism enhances productivity and accelerates the app development process. This cookbook entry will guide you through customizing and debugging SwiftUI previews.

To start with, SwiftUI previews can be seen in the Xcode canvas, which updates in real-time as you modify your code. This instant feedback allows you to quickly iterate on your design.

Consider a simple view that displays a message:

struct ContentView: View {
  var message: String = "Hello, world!"

  var body: some View {
    Text(message)
  }
}

You can customize the preview by creating different instances of ContentView with different message inputs:

struct ContentView_Previews: PreviewProvider {
  static var previews: some View {
    ContentView(message: "Hello, world!")
      .previewDisplayName("Saying hi")

    ContentView(message: "Goodbye, world!")
      .previewDisplayName("Saying bye")
  }
}

Now click the Saying bye preview on the canvas and you should see:

As you can see, ContentView is previewed twice, each with a distinct message and a descriptive name provided by previewDisplayName.

At times you may encounter issues with SwiftUI previews not updating as expected. This might occur due to Xcode caching older versions of the preview code. To address this issue, you can clean the build folder by going to Product ▸ Clean Build Folder in Xcode.

Lastly, while SwiftUI previews are an incredibly powerful tool, they might not always perfectly match the behavior of your application when it’s run as a standalone app. For instance, they don’t always correctly represent system settings or app lifecycle events. It’s essential to test your app in the simulator or on a device to confirm its behavior.