SwiftUI Preview Xcode 14

Published in

Bilue Product Design & Technology Blog

3 min readJun 15, 2022

This year at WWDC22 there was an awesome developer feature announced for Xcode. For SwiftUI previews you can now easily see your view in different variations such as color scheme, orientation, and dynamic type variants. Also you can tweak these values a bit easier with Canvas Device Settings.

In Xcode 13 this was only possible by adding values to the preview view itself. While this works just fine especially if you create a wrapper with all of these values, it's not as easy as an out of the box solution that Xcode 14 is providing.

Before diving into Xcode 14 let’s take a look at how you could do something similar in Xcode 13.

Xcode 13 preview variants

By default a SwiftUI view comes with a Preview to allow for rapid development of your view. This is particularly helpful for injecting in various mock data to help visualise your view.

As I like to test my views in various ways such as light/dark mode, accessibility, dynamic type, etc the previews was a bit tedious everytime I wanted to change a value. Update a modifier here and it would add it to code before reloading.

One way around this is to have multiple devices in various formats. We can add multiple views to previews such as the code below. While this works just fine there is a lot of variations one would want to visualise. At this point I’d write some wrapper to have show all devices such as the dynamic type variant you’ll see later. Dynamic type alone has 12 variations which would mean 12 different ContentViews.

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .environment(
                \.sizeCategory, 
                .accessibilityExtraExtraExtraLarge
            )
            .previewInterfaceOrientation(.portrait)        ContentView()
            .environment(
                \.sizeCategory, 
                .small
            )
            .previewInterfaceOrientation(.landscapeLeft)
}

Xcode 14 preview variants

This year at WWDC22 we now have support to show 3 different variations which is huge. This will help us streamline testing of our views in various variations.

Color Scheme Variant

Orientation Variant

Dynamic Type Variant

There is 4 more below these but was a bit too big vertical to show all

Canvas Device Settings

Depending on which variant you have selected you have multiple additional options to combine with the first variant. This Canvas Device Settings can be found just to the right of the variants button.