How to preview SwiftUI Layout without device frame

When you create a new SwiftUI view, it will come with a preview code like this.

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

This PreviewProvider lets you debug your view in the Xcode without running your app.

To open the preview.

1. Select Editor Menu > Canvas.
2. Or ⌥ – option + ⌘ - command + ⏎ Return.

The preview editor will show up side by side with your code editor.

By default, you will see your view render in a selected device.

But if you want to preview your view independent of the device context, you can also do that.

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

Note Taking:Quickly take note using Voice, Camera, or Typing

Try it for Free

How to preview SwiftUI layout Without Device frame

To preview a SwiftUI layout without a device frame, you need to add .previewLayout(.sizeThatFits) to your preview content.

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .previewLayout(.sizeThatFits)
    }
}

With this one line of code, you can preview your view without a device frame.