Xcode Canvas for SwiftUI previews does not show up

Question

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?

Are you running macOS Catalina? https://twitter.com/twostraws/status/1135649683013947392?s=21 — Paulw11, Jun 03 '19 at 22:04

Andrei Konstantinov · Accepted Answer · 2019-06-04T09:50:33.673

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.

edited Jun 04 '19 at 09:50

answered Jun 03 '19 at 22:16

Andrei Konstantinov

6,971
4
41
57

26

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. – Karol Kulesza Jun 07 '19 at 06: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 Jun 07 '19 at 07:42
2

Now it states that when opening the canvas. – Teejay Jul 14 '19 at 18:18

score 24 · Answer 2 · edited Apr 20 '20 at 20: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())

edited Apr 20 '20 at 20:18

Vatsal Manot

17,695
9
44
80

answered Jun 05 '19 at 06:17

Akash Soni

535
2
16

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 Jun 07 '19 at 07: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. – Eddie Eddie Eddie Jun 07 '19 at 20:02

score 22 · Answer 3 · edited May 21 '21 at 17:53

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)

edited May 21 '21 at 17:53

ChrisF

134,786
31
255
325

answered Nov 16 '19 at 15:38

canerkaseler

6,204
45
38

score 20 · Answer 4 · answered Mar 31 '21 at 14:22

20

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.

answered Mar 31 '21 at 14:22

Alan Scarpa

3,352
4
26
48

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

score 16 · Answer 5 · edited Jun 04 '19 at 02:24

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!

edited Jun 04 '19 at 02:24

Cœur

37,241
25
195
267

answered Jun 04 '19 at 01:44

Simon

6,413
6
34
57

score 12 · Answer 6 · answered Jun 07 '19 at 07:21

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.

answered Jun 07 '19 at 07:21

CrazyPro007

1,006
9
15

score 9 · Answer 7 · edited Apr 21 '22 at 19:03

9

Copy the content of the swift file
Move the file to the trash
Create the swift file again
Paste and run your code

edited Apr 21 '22 at 19:03

pkamb

33,281
23
160
191

answered Feb 13 '20 at 00:17

C Williams

850
12
19

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. – strangetimes Apr 16 '20 at 13:13

score 5 · Answer 8 · edited Apr 07 '20 at 18:02

5

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
    }
}

edited Apr 07 '20 at 18:02

Jan Erik Schlorf

2,050
21
36

answered Mar 29 '20 at 11:17

Vikesh Prasad

779
7
13

Yes, it is so simple. Just deleted this some time ago… – heiko Jul 13 '22 at 12:01

score 3 · Answer 9 · answered Aug 05 '20 at 09:08

3

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:

copy file code
delete the file
create a new file by the same name
past the code to the new file

answered Aug 05 '20 at 09:08

Ali Aljabri

55
6

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

turingtested · Answer 10 · 2019-09-12T13:14:42.417

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.

YodagamaHeshan · Answer 11 · 2019-11-21T05:06:48.263

2

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

edited Nov 21 '19 at 05:06

answered Sep 24 '19 at 11:21

YodagamaHeshan

4,996
2
26
36

score 1 · Answer 12 · edited Mar 09 '20 at 06:58

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

edited Mar 09 '20 at 06:58

Jonny

15,955
18
111
232

answered Jun 22 '19 at 17:21

casillas

16,351
19
115
215

score 1 · Answer 13 · answered Jun 28 '19 at 15:22

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

answered Jun 28 '19 at 15:22

Pierz

7,064
52
59

score 1 · Answer 14 · answered Sep 24 '19 at 15:05

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.

answered Sep 24 '19 at 15:05

Anuj J

186
1
11

score 1 · Answer 15 · answered Oct 11 '19 at 08:25

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

Your MacOS version is equal or upper than 10.15
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.
Run the commands from Terminal :

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

and then

sudo xcodebuild -license

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.

score 0 · Answer 16 · answered Apr 12 '21 at 11:25

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"

answered Apr 12 '21 at 11:25

Giridharan Venkatapathy

1,124
7
16

score 0 · Answer 17 · answered Sep 16 '22 at 10:12

0

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

answered Sep 16 '22 at 10:12

Sanad Barjawi

539
4
15

score 0 · Answer 18 · answered Dec 17 '22 at 06:59

0

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

answered Dec 17 '22 at 06:59

Qalab

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](/help/how-to-answer). – Community Dec 19 '22 at 13:49

score 0 · Answer 19 · answered Jun 20 '23 at 07:52

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

answered Jun 20 '23 at 07:52

Mehmet Uzel

1
1

Xcode Canvas for SwiftUI previews does not show up

19 Answers19

Linked

Related