51

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?

1

19 Answers 19

64

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.

3
  • 27
    It should be clearly communicated in Xcode, when you try to switch to Editor and Canvas mode. "Let's just do nothing and force the user to google why it's not showing up" approach is a BAD approach. Commented Jun 7, 2019 at 6:21
  • @KarolKulesza thats true, even on the dev portal its showing requirements for the new iOS: Installation requires macOS 10.15 beta or Xcode 11 beta but not even a note for xcode11
    – zero3nna
    Commented Jun 7, 2019 at 7:42
  • 2
    Now it states that when opening the canvas.
    – Teejay
    Commented Jul 14, 2019 at 18:18
24

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

2
  • 1
    but this is not the new canvas, its just the live view if you run the app. you can do that as well with a project
    – zero3nna
    Commented Jun 7, 2019 at 7:36
  • 1
    That might be cool, but that's not quite the question. After reading the other answers, it's clear Apple just didn't place the "Xcode 11 beta runs on Mojave but runs more of the features best on Catalina" notice in enough places. Preview is one the features I'm most excited about using. Commented Jun 7, 2019 at 20:02
23

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.

1
  • Also, everything this view depends on has to compile successfully or you will get the dreaded "Try Again/Diagnostics" notice.
    – tgunr
    Commented Aug 6, 2022 at 14:17
22

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

0
16

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!

0
12

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

8
  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
1
  • 2
    Shockingly this is the only thing that worked. Seems like somehow the file stopped being recognized as a SwiftUI file till a new one was created. No amount of rebooting and restarting Xcode helped, even closing / showing the canvas etc. Copy contents, Delete the file, create a new one and paste. Voila. Commented Apr 16, 2020 at 13:13
5

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

import SwiftUI

@main
struct ContentView_App: App {
    init() {
    }
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView() // Initialize your struct
    }
}
1
  • Yes, it is so simple. Just deleted this some time ago…
    – heiko
    Commented Jul 13, 2022 at 12:01
2

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.

0
2

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

0
2

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

1
  • Did this on Big Sur 11.1, nada. Still something else.
    – Allen King
    Commented Dec 20, 2020 at 20:05
1

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
1

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.

1

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.

1

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

0

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

0

ran into the same problem, everything was up to date. Got it to work by turning off code coverage for all targets :)

0

Go to editor on Xcode, and under it click Editor & Canvas.

1
  • Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    Commented Dec 19, 2022 at 13:49
0

If you just start using canvas first open your ContentView then your canvas will appear don't start with different files like your models or themes

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.