Configure Xcode SwiftUI live previews with multiple layouts

Did you know that you can display and configure different previews in Xcode’s SwiftUI live preview? This is great for saving time when it comes to testing different color modes like light and dark, or checking landscape and portrait layouts.

Forget going to the simulator menu and choosing options, just configure and view them all at once. Take a look at this code sample for showing both light and dark mode versions in Xcode.

struct MyView_Previews: PreviewProvider {
    static var previews: some View {
      Group {
        AddNewPreset(showAlert: false)
          .previewDisplayName("Light Mode")
        AddNewPreset(showAlert: false)
          .preferredColorScheme(.dark)
          .previewDisplayName("Dark Mode")
      }
    }
}

This will create two tabs in the live preview, one named “Light Mode” and the other “Dark Mode”, both will update as you make changes and view them. There are lots of options you can configure, give it a try.