What's New in Xcode 14 Previews

Xcode 14 brings a new look and features to SwiftUI previews that might reduce the amount of preview configuration code you need.

Xcode 14 SwiftUI Preview Canvas

Xcode 14 brings a new look to the preview canvas. The pin control is now in the upper left corner and works as before allowing you navigate to different source files while pinning the preview in the canvas. Next to the pin control are the new page controls. The canvas controls are in the bottom left corner and the zoom controls are in the bottom right:

Xcode 14 preview canvas

The canvas controls are a mix of the old and new:

Canvas control icons

From left-to-right they are:

  • Live (selected by default)
  • Selectable
  • Variants
  • Device Settings
  • Preview on Device

Previews Are Live By Default

The first big difference in Xcode 14 is that previews are live and interactive by default. The Selectable control switches back to the non-interactive mode where selecting a view in the source code highlights it in the canvas:

Selectable mode with a text view selected

Page Controls

One difference that I’m not sure I like is that multiple previews are now shown on separate pages. For example, here’s a preview of a list row at various dynamic type sizes, interface style and language direction previewed in Xcode 13:

Xcode 13 multiple previews

The previews are all visible on the same page. By contrast, Xcode 14 shows each preview on a separate page with the page controls allowing you to switch between each preview:

Xcode 14 paged previews

I find this harder to scan though maybe showing one preview at a time uses less resources?

Device Variants

For me, the most promising new feature is the one-click device variants that creates a preview for all variations of a trait. You choose between color scheme, orientation or dynamic type:

Device variants menu

Xcode generates all possible variants of the preview. For example, light and dark color schemes, portrait, landscape-left and landscape-right orientations or all twelve variants of dynamic type. For example, here’s the dynamic type preview:

Twelve dynamic type variations

This doesn’t work if you’ve already overriden the trait in your preview configuration code. I think the idea is that you shouldn’t need to set the environment in your preview code like this:

CountryCell(country: Country.uk)
  .environment(\.sizeCategory, .extraExtraExtraLarge)
  .environment(\.colorScheme, .dark)

Instead you can rely on the canvas controls to preview the layout for all possible variants.

Device Settings

The canvas device settings let you vary the color scheme, orientation or dynamic type setting for the preview as with Xcode 13:

Canvas device settings

What’s more useful is they work together with the device variants so you can try different combinations. For example, showing all dynamic type variants in landscape:

Dynamic type variants with landscape left orientation

Note that the canvas device settings doesn’t show the dynamic type option since we are already applying the dynamic type variant.

Previewing On Device

The Preview on Device button works as before to show the preview on a physical device. Xcode 14 allows you to preview views that are in a Swift package without needing a containing application.

What’s Missing?

I like the device variants button in Xcode 14 but it doesn’t go far enough for me. I want an easier way to vary which device type the preview is using. For example, add an option to the device variants menu to select recommended iPhone/iPad variants which generates previews for a selection of devices sizes (it doesn’t have to be all supported models).

If I’m building an adaptive layout I want to preview it at the various breakpoints. For example, on the narrowest iPhone SE, a “normal” iPhone and iPhone Max. I can then use the device settings to view the layout on those different devices in different orientations and dynamic type sizes all without writing any preview configuration code.

When previewing on the iPad I want to see view widths that match the various split screen and slide over modes. Interface Builder already has something like this.

Learn More