Xcode Previews: What is it, and how to use it

⋅ 5 min read ⋅ Xcode Xcode Previews

Table of Contents

In this article, we will briefly introduce Xcode Previews by answering the following questions.

What is Xcode Preview

Xcode Preview was a feature in Xcode that can generates previews for a SwiftUI view, UIView, or UIViewController without a need to build and run the whole app.

Xcode Preview was introduced at the same time when Apple introduced the SwiftUI framework in WWDC 2019.

Since SwiftUI has no storyboard, we can't debug a view as we did with Interface Builder.

I think the primary purpose of Xcode Previews is to substitute what Interface Builder does on UIKit.

But Xcode Previews is much more powerful. You can see an update in real-time and even interact with it.

Here is an example of a simple counter app.

Xcode Previews.
Xcode Previews.

As you can see,

  • The UI updates when the code updates.
  • And you can tap the button to see how it works.

You can easily support sarunw.com by checking out this sponsor.

Sponsor sarunw.com and reach thousands of iOS developers.

How to create Xcode Previews

You need to import the SwiftUI module to create a preview.

That's because the PreviewProvider, which is a type that produces previews in Xcode, is defined in SwiftUI.

To create an Xcode preview:

  1. You need to declare a struct that conforms to the PreviewProvider protocol.
  2. Return a view you want to preview from the static computed property, previews. This is the only required property in the PreviewProvider protocol.
struct ContentView: View {
var body: some View {
VStack {
Image(systemName: "globe")
Text("Hello, world!")
}
.font(.largeTitle)
.padding()
}
}
// 1
struct ContentView_Previews: PreviewProvider {
// 2
static var previews: some View {
// 3
ContentView()
}
}

1 We create a new struct that conforms to the PreviewProvider protocol. You can name it whatever you want.
2 PreviewProvider protocol required us to implement the previews computed property.
3 We return a view that we want to preview from the previews computed property.

Xcode automatically discovers preview providers in your project and generates previews for any providers currently open in the source editor.

Preview of the ContentView.
Preview of the ContentView.

How to open Preview in Xcode

Normally, Xcode preview will show side-by-side with your source editor.

But if it doesn't show up, you might accidentally close it.

There are many ways to reopen the Xcode preview (Xcode calls this Canvas) as follows:

  1. ⌘ - command + ⌥ – Option + ⏎ Return.
  2. Toggle the Canvas editor on in Editor Menu > Canvas.
  3. Click on "Adjust Editor Options", then select "Canvas".
Adjust Editor Options.
Adjust Editor Options.

You can easily support sarunw.com by checking out this sponsor.

Sponsor sarunw.com and reach thousands of iOS developers.

How to use Xcode Previews

When you open the Canvas editor, you will see a screen like this.

Canvas Editor.
Canvas Editor.

This is where you can control many aspects of the Xcode Previews. I will go through each control one by one.

Zoom level

You can control a zoom level using the control on the bottom right.

Zoom Level.
Zoom Level.

Here is each control from left to right.

  • Zoom out
  • Zoom to 100%
  • Zoom to fit (See the whole device)
  • Zoom in
Zoom options.
Zoom options.

Preview on Device

Preview on Device allows you to preview a view on a physical device.

Preview on Device.
Preview on Device.

After selecting the Preview on Device button, the currently active preview will show on your device.

You can think of this as a way to build and run a single view on your device.

You can still access this preview even after you close the Xcode via the Xcode Previews app.

So, you can use this to show a single screen or component to your teammate quickly.

Xcode Previews app.
Xcode Previews app.

Device Settings

Device Settings let you customize the Color Scheme, Orientation, and Dynamic Type of the preview.

Device Settings.
Device Settings.

This is useful to check how a view looks on different settings.

Device Settings.
Device Settings.

Variants

Instead of previewing different settings individually, we can view variations of settings at once using Variants control.

Variants control.
Variants control.

After you select the setting that you want, all variants of that setting will show up.

Dynamic Type Variants.
Dynamic Type Variants.

You can also click a variant to see it in full screen.

Click a variant to see it in full-screen mode.
Click a variant to see it in full-screen mode.

Live Interaction

Xcode preview is in the Live mode by default. In this mode, you can interact with your preview like a running app.

Live.
Live.

You can interact with a button like a real running app.

You can interact with your preview in Live mode.
You can interact with your preview in Live mode.

Selectable Mode

If you like to build your view using UI instead of code, you might want to use "Selectable" mode.

Selectable.
Selectable.

This mode allows you to select and modify a view from Canvas.

Selectable Mode.
Selectable Mode.

Multiple Previews

As mentioned earlier, Xcode automatically discovers preview providers in your project and generates previews for any providers currently open in the source editor.

That means you can have multiple previews in one file.

This can happen if you have multiple views inside the previews property or have multiple PreviewProvider.

Each preview will sit inside its own tab. You can switch between each of them by clicking on the tab at the top of Canvas.

You can switch between each preview by clicking a tab.
You can switch between each preview by clicking a tab.

Pin

If you want a preview to always show regardless of the source file currently open, you can pin it.

You can pin a view by selecting Pin control on the top left of the Canvas.

Pin
Pin

In this example, I pin a HelloWorldView.

HelloWorldView.
HelloWorldView.

Even I'm on the ContentView.swift, I can see "Hello World View" on my previews.

We can always see the pinned view.
We can always see the pinned view.

Read more article about Xcode, Xcode Previews, or see all available topic

Enjoy the read?

If you enjoy this article, you can subscribe to the weekly newsletter.
Every Friday, you'll get a quick recap of all articles and tips posted on this site. No strings attached. Unsubscribe anytime.

Feel free to follow me on Twitter and ask your questions related to this post. Thanks for reading and see you next time.

If you enjoy my writing, please check out my Patreon https://www.patreon.com/sarunw and become my supporter. Sharing the article is also greatly appreciated.

Become a patron Buy me a coffee Tweet Share
Previous
Remove all limitations on variables in result builders

Swift 5.8, we have more flexibility in declaring local variables inside a result builder.

Next
How to check if code is in DEBUG or RELEASE build in Swift

Learn how to compile code only on a specific build configuration.

← Home