hacks_LiveView11.png
Example from Playground book for Bluefruit

Your Live View manages the other half of your playground book's user interface as well as the interactions between that interface and the data. It doesn't take much to create the live view.

Your playground template contains a LiveView.swift file. You could write all of your live view code inside the LiveView.swift file, but then you'll need to copy all of your code to another playground page live view if you wanted to make multiple pages that share the same live view behavior.

So with these few lines of code, I can share the same View Controller in the Sources Folder.

Here's what it looks like under the hood:

Download: file
import PlaygroundSupport

let viewController: ViewController = ViewController(1)
PlaygroundPage.current.liveView = viewController

First, we import the PlaygroundSupport framework:

import PlaygroundSupport

Then, I mirror a view controller that's in the Sources folder. In the Live View we copy a View controller that is in the Sources folder to a locale constant variable:

let viewController: ViewController = ViewController(1)

Then when the playground page looks for the current page live view, we give the page an instance of View Controller.swift that's located in the Sources folder:

PlaygroundPage.current.liveView = viewController

That's it!

This Live View is "Always-On" it runs in a different process as the code editor on the left that runs when code in the editor is compiled. 

Playground Page Manifest

In the playground page, manifest.plist contains the following key-value pairs specifying the attributes for a page.

Name Key

The display name of the playground page displays at the top of the user interface …

LiveViewEdgetoEdge Key

The LiveViewEdgetoEdge controls the size of the live view with a boolean value. Setting the key to NO reduces the size of the live view, while setting the key to YES expands the view.

hacks_123.png
LiveViewEdgeToEdge Value is NO
hacks_LiveView3.png
LiveViewEdgeToEdge Value is YES

LiveViewMode Key

The LiveViewMode is used to control the display of the live view area while the live view isn't running. 

The only values that can be used are:

VisibleByDefault - Shows the live view when the playground opens.

HiddenByDefault - Hides the live view until the playground is run.

 

hacks_IMG_002222.png
VisibleByDefault
hacks_IMG_0021_copy.png
HiddenByDefault

Poster Reference Key

The base name of an image file that is shown centered and unscaled in the live view before the live view runs. Your image can be located in any Resource folder of your playground book.

This guide was first published on Dec 22, 2017. It was last updated on Dec 22, 2017.
This page (Playground Live View) was last updated on Oct 16, 2020.