How to preview your layout in portrait or landscape

Paul Hudson @twostraws December 1st 2022

Updated for Xcode 14.2

New in iOS 15

SwiftUI has a dedicated previewInterfaceOrientation() modifier that controls the way device previews look in Xcode’s canvas. To use it, pass one of the four device rotation options: .portrait, .portraitUpsideDown, .landscapeLeft, or .landscapeRight.

For example, this will show a landscape left preview:

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .previewInterfaceOrientation(.landscapeLeft)
    }
}

An Xcode Preview of a phone rotated left into Landscape orientation.

Remember, your preview provider can contain several devices and they’ll display one above the other. This means you can have both portrait and landscape visible at the same time:

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()

        ContentView()
            .previewInterfaceOrientation(.landscapeLeft)
    }
}

Xcode Previews in upright orientation and rotated left into Landscape orientation.