'Xcode Canvas for SwiftUI previews does not show up

I´m trying to get the new Canvas feature from Xcode 11 running, but the Canvas won´t show up. What am I doing wrong?

This new Xcode feature should show a live preview of my SwiftUI views without running the app.

When you create a custom View with SwiftUI, Xcode can display a preview of the view’s content that stays up to date as you make changes to the view’s code. You define a structure that conforms to the PreviewProvider protocol to tell Xcode what to display. Xcode shows the preview in a canvas beside your code.

https://developer.apple.com/documentation/swiftui/previews-in-xcode

I just created a new default project (single view app), compiled it and activated 'Editor > Editor and Canvas'. I can navigate to each file in the project, nothing shows up.

What else does need to be done?



Solution 1:[1]

You need to be on Catalina macOS version (10.15), as stated in official tutorial

Be warned: Catalina doesn't support 32-bit applications, some old apps will stop working after update.

Solution 2:[2]

you can still see the live view (without Catalina installed ) with the playgrounds. using UIHostingController.

import UIKit
import SwiftUI
import PlaygroundSupport



struct ContentView : View {
    var body: some View {

        Text("Hello World")
            .foregroundColor(Color.blue)
    }
}

// Present the view controller in the Live View window
PlaygroundPage.current.liveView = UIHostingController.init(rootView: ContentView())

enter image description here

Solution 3:[3]

Update Mac OS version 10.15 or upper version. Update Xcode 11 or upper version. After that click Editor > Canvas for code preview.

Bonus: If you would like to see code preview left side, you can change layout from Menu Icon > Layout > Canvas Right. (I shared screenshot)

Bonus info screenshot

Solution 4:[4]

To further add to the other answer, as per the official tutorial from Apple:

To preview and interact with views from the canvas in Xcode, ensure your Mac is running macOS 10.15 beta.

Unfortunate that I can't run it right now since the beta was just released and I don't have a spare Mac!

Solution 5:[5]

I tried all these steps, but then realized I did not have my PreviewProvider set up in my file. Without this, the preview won't show up.

Make sure you have it set up like this:

struct YourView_Previews: PreviewProvider {
    static var previews: some View {
        YourView()
    }
}

Then you can follow the advice of the other answers in this thread and your canvas window should pop right up.

Solution 6:[6]

The preview only works on MacOS 10.15 Beta

You need to tap on Editor and Canvas Option in Xcode 11.0-Beta, alternatively you can tap on Editor -> Editor and Canvas from top options

Attached screenshots for refrence.Image

image 2

Solution 7:[7]

  1. Copy the content of the swift file
  2. Move the file to the trash
  3. Create the swift file again
  4. Paste and run your code

Solution 8:[8]

If you move swiftUI file to a new folder the canvas will not appear and the best solution is to copy all code in the file then remove the file in trash then create a new file and past your code

Steps:

  1. copy file code

  2. delete the file

  3. create a new file by the same name

  4. past the code to the new file

Solution 9:[9]

This could be the effect if you upgraded Xcode to a higher beta version and got the following error message during the process:

Loading a plug-in failed

The plug-in “com.apple.dt.UVKit” at path “/Applications/Xcode-beta.appDownloads/Xcode-beta.app/Contents/PlugIns/UVKit.framework” could not be loaded. The plug-in or one of its prerequisite plug-ins may be missing or damaged. The plug-in or one of its prerequisite plug-ins may be missing or damaged and may need to be reinstalled.

The solution seems to be to upgrade the Catalina beta version to the same level. Here's the link to Apple's Beta Software Downloads.

Solution 10:[10]

you have to install macOS at least version (10.15 or above)

Solution 11:[11]

Also, make sure this function is called in your SwiftUI file (outside of the actual View struct).

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

Solution 12:[12]

As well as running MacOS Catalina [beta] it seems that you need to have the command line tools installed otherwise it fails and 'pauses' the canvas (this happened with Xcode 11 Beta 2). To install them run:

xcode-select --install

Solution 13:[13]

Canvas preview only works after update MacOS 10.14 to 10.15

We have Mac OS Catalina Beta version (10.15)

Upgrade your system and it works. :)

Check this link.

Solution 14:[14]

Some important checklist , please check one by one. If all this is done , you can easily get "Editor and Canvas" option.

  1. Your MacOS version is equal or upper than 10.15

  2. You are using at least Xcode 11 Beta or later. If you have Xcode 11 but your MacOS is bellow 10.15 , you won't be able to see the option.

  3. Run the commands from Terminal :

sudo xcode-select -s /Applications/Xcode.app/Contents/Developer

and then

sudo xcodebuild -license

  1. If check list 1 and 2 is done , go to to the Preferences option and select command Line Tools. Preferences -> Locations and assigning the Command Line Tools to Xcode 11/Beta.

Most of the time, option 4 is the problem.

Solution 15:[15]

Frustrated with what Xcode offers for SwiftUI canvas (and how it does not communicate to you that you need to upgrade to Catalina to have this feature available), I decided to create my own tool: QDesigner. It is an iPad app where you can simply drag & drop SwiftUI controls on iPhone canvas, customize them with a few taps and generate SwiftUI code with a single tap. No Xcode required.

First Beta of QDesigner is available via TestFlight:
https://testflight.apple.com/join/aSXW5tVp

There is also a companion QDesigner Client app for iPhone, that can be connected with QDesigner running on iPad, to see your UI design on a target device, updated in real-time:
https://testflight.apple.com/join/DQv0DBJU

I hope it'll be helpful for at least some of you! Let me know what you think, there is of course a ton of work ahead to make it fully functional, but the first beta is already beneficial for basic SwiftUI usage.

See demo videos of QDesigner and learn more by visiting website:
https://Q-Mobile.IT/Q-Designer

QDesigner1

QDesigner2

QDesigner3

Solution 16:[16]

To preview and interact with views from the canvas in Xcode, ensure your Mac is running MacOS 10.15 beta.

Tools for SwiftUI development are only available when running on macOS 10.15 beta.

https://developer.apple.com/tutorials/swiftui/creating-and-combining-views

Solution 17:[17]

For people who wanted to move preview it to the right side... Change Layout (right corner of workspace second last option) to "Canvas on Right" change Xcode preview position giridharan