TechnologiesSwiftUI

PreviewProvider protocol

iOSmacOStvOSwatchOSvisionOSiOS 13.0+✓ renders

A type that produces view previews in Xcode.

How it works

A type that produces view previews in the Xcode canvas. Conform to PreviewProvider to give Xcode a self-contained sample of a view it can render and refresh continuously while you edit, without building and launching your full app. Reach for it whenever you want a fast design loop on a single view in isolation, supplying exactly the data and configuration that view needs to draw. The protocol is purely a development-time hook: the previews it produces never ship in your running application.

  1. Conform a type to PreviewProvider

    Declare a separate type alongside the view under design and adopt the protocol on it. Xcode discovers any type that conforms to PreviewProvider in a file and drives it to populate the canvas, so the conforming type acts as the entry point for previewing a view such as PreviewProviderDemo.

  2. Return content from the previews property

    The protocol's single requirement is a static previews property whose type is an associated Previews view. Whatever you return there is what the canvas renders, so you instantiate the target view inside it — here PreviewProviderDemo() — supplying any initializer arguments or sample state the view requires to display.

  3. Treat previews as ordinary SwiftUI content

    Because previews returns a View, you compose it with the same building blocks as the live UI. The returned view carries its own layout and modifiers — the VStack, Image, and Text with .padding() in PreviewProviderDemo — so what you see in the canvas matches what the type renders at runtime.

  4. Configure each preview with view modifiers

    Apply standard SwiftUI modifiers to the returned content to pin down how a single preview appears — for example sizing the canvas, naming the preview, or selecting a color scheme — letting you exercise one specific configuration of PreviewProviderDemo without touching the view's own definition.

Try it — Add a second PreviewProviderDemo() to the returned previews content and attach .preferredColorScheme(.dark) to it to see the same view rendered light and dark side by side in the canvas.

Example & preview

Press Run live & edit to compile it in your browser — then edit the Swift on the left and the preview re-renders live.

PreviewProvider.swift
struct PreviewProviderDemo: View {
    var body: some View {
        VStack(spacing: 12) {
            Image(systemName: "eye")
                .font(.largeTitle)
                .foregroundStyle(.blue)
            Text("Preview")
                .font(.title2.bold())
            Text("A PreviewProvider renders this view in the Xcode canvas.")
                .font(.caption)
                .foregroundStyle(.secondary)
                .multilineTextAlignment(.center)
        }
        .padding()
    }
}
Live preview
Preview A PreviewProvider renders this view in the Xcode canvas.
Preview A PreviewProvider renders this view in the Xcode canvas.
swift → lexer → parser → sema → uiir → canvas Open in Studio ↗
What's new in SwiftUI 27 →