Cover Image

Contents

Xcode Previews allow you to preview your UI as you build it. Previews have been around for many years and are still applicable for VisionOS development.

Change the window style

You can update the preview’s WindowStyle to one of two options.

Plain:

#Preview(windowStyle: .plain) {
    ContentView()
}

Plain window style

Volumetric:

#Preview(windowStyle: .volumetric) {
    ContentView()
}

Volumetric window style

Set the window dimensions

Set the width and height of the preview window using the fixedLayout PreviewTrait:

#Preview(windowStyle: .plain, traits: .fixedLayout(width: 100, height: 300)) {
    ContentView()
}

Small window example

Refresh the preview

The preview will refresh when you make changes but if you move around the simulated space, you may want to refresh the view. You can refresh the preview, or “canvas”, a few different ways.

Option 1 - Editor > Canvas > Refresh Canvas

Refresh canvas menu option

Option 2 - option + command + p

Option 3 - Define your own keyboard shortcut under Settings > Key Bindings. Search for “refresh canvas”

Refresh canvas key binding

Refreshing will not move the window from its last location

Orient yourself

There is a camera icon at the bottom right of the preview canvas. Select any of the options to immediately orient yourself relative to the front of the preview window

alt text alt text

Change the environment

Next to the camera angle icon is an icon that lets you change the environment of the preview. The environment will affect all previews, not just the current one.

VisionOS Preview Environments

Interact with the environment

At the bottom right of the preview you will find 5 icons that let you interact with the environment and your VisionOS window in different ways. From left to right:

  • Interact with the content
  • Look around
  • Move vertically and horizontally
  • Move around the content
  • Move closer or farther Preview controls