Write SwiftUI Entirely on an iPad Using Swift Playgrounds

You don’t need to open Xcode or even own a Mac to get started with Apple’s new declarative design framework. Write and test simultaneously!

Rob Sturgeon
Jan 14, 2020 · 6 min read
Image for post
Image for post
Photo by Henry Ascroft on Unsplash

Here are the basics of what this tutorial is about:

When Swift first appeared in 2014, it was designed to be an easy first programming language. Semi-colons aren’t required to end each line, conditional statements don’t need to be inside brackets, and it’s not necessary to end every case of a switch statement with a break. This makes it easier for kids to write their first code without needing to constantly look out for missing punctuation. The language was made more accessible when Apple released the Swift Playgrounds iPad app in 2016, making it even easier to learn the basics in a classroom or at home, even without a computer.

Until June 2019, the only way to design a user interface for a Swift app was using storyboards, a drag-and-drop interface that stored its data in a complicated XML file. This all changed when Apple announced SwiftUI, a declarative language for designing user interfaces that can be instantly previewed. The Swift Playgrounds iPad app has recently added support for SwiftUI, as well as the Combine framework which provides new ways to handle asynchronous events.

Let’s see what SwiftUI allows us to do on iPad now that we could never do before.

Getting Started

If it isn’t already on your device, download the free Swift Playgrounds app.

When you open Swift Playgrounds, you go straight to the New Playground page. If you have opened the app before, you’ll see your previous Playground files here. If not, the screen will be mostly empty. Either way, there is a panel at the bottom of the screen that has the title Other Playgrounds. Tap the blue ‘See all’ button at the right end of this panel, and the panel should expand to show the Swift tutorials Apple provides. Scroll down to the Starting Points row, and tap the blue ‘See all’ button for that.

Now you should be able to see all the example projects that Apple provides, although there isn’t an example for SwiftUI at the time that I’m writing this.

Image for post
Image for post

You have two choices that will work as Starting Points for this tutorial. Blank will create a new .playgroundbook file that can be opened in Swift Playgrounds on an iPad, but cannot be opened by Xcode on a Mac. If you‘re fine with using your iPad independently, this is probably the format for you. If you can see yourself transferring to Xcode, this is where the Starting Point called Xcode Playground comes in. This uses the same .playground file type that Xcode uses, giving you the ability to edit the same file on both devices.

Swift Playgrounds seems to store its documents in iCloud by default, so it’s easy to see how you could access the same file from either device without having to email or AirDrop it to yourself each time. The New Playground page of the app has a blue Locations button in the top left that allows you to browse using the Files app, allowing you access to other cloud providers, such as Dropbox, Google Drive, and Microsoft OneDrive, too.

Again, if you only want to learn SwiftUI in a safe sandbox on your iPad, this won’t matter to you as much.

It’s possible to write SwiftUI in Playgrounds without a preview window. To do this, you simply import SwiftUI and create a struct that conforms to the View protocol, with the required body variable that returns ‘some View.’ Playgrounds has some code completion and can help you correct your SwiftUI with automatic fixes for common mistakes. But the real power of SwiftUI in Xcode is the ability to see a live preview of what you’re creating, so we need two more lines to make that happen on iPad.

Start previewing your SwiftUI by importing PlaygroundSupport and setting the live view

Importing PlaygroundSupport gives you access to PlaygroundPage, which allows configuration of your iPad coding environment. Only one Playground page is active at any given time, so this static instance is accessible through PlaygroundPage.current. This gives us the ability to set the live view, which runs continuously on the iPad, to the ContentView that we created above.

Now you should be able to press the ‘Run my code’ button and see that the app turns into a split view. On the left is the SwiftUI code, and on the right should be the live view that shows ‘SwiftUI on iPad’ in bold text in the centre. Now you’re ready to build your user interface, which will make use of many of the controls that come with SwiftUI.

First, we’ll need to use State variables, which basically store data locally in the SwiftUI struct and redraw the View whenever their values change.

Add these inside the ContentView struct brackets but before the declaration of the body property

Add these inside the ContentView struct brackets but before the declaration of the body property. This is all we’ll need to store the state of all of our controls.

The Controls

  • A Toggle that changes whether a Text is displayed
  • A Button that alternates between red and blue each time you tap it
  • A Stepper that increases a displayed number
  • A TextField that displays what you wrote in a Text underneath
  • A Slider that displays its value in a Text underneath
You can add these in any order, but they must be inside the brackets of the main VStack

You can add these in any order, but they must be inside the brackets of the main VStack. This is because the body property has to be one single View, so you can’t just list a load of controls. VStack makes this different by allowing you to arrange up to ten Views inside it, while still satisfying this requirement of being one View for the purposes of the body property. It makes sense that the controls be below the Text you wrote originally since this is the title, but this is not required.

Every time you add a control and there are no errors, the live view successfully updates itself. You should be able to try them out and check that they do what you expect. You might notice that the split view has a handle in the middle. You can drag this to change how big the two halves of the screen are, just like you can when multitasking with two apps on your iPad in Split View.

When you make the live view big enough, it suddenly becomes fullscreen, which might be useful for previewing more complicated interfaces. You’ll see an arrow in the middle of the left side of the screen, which you can tap to return to split view. Similarly, swiping the split-view handle to the right can make the code fullscreen, which probably makes it easier to focus on writing and debugging the code before testing it with the live view.

Image for post
Image for post

Next Steps

A great starting place to learn more is Hacking With Swift’s SwiftUI by Example. These tutorials are always up to date and easy to follow. You may occasionally come across bugs in the iPad app, as SwiftUI support has only just been added. In my experience, the live view on iPad actually seems to be faster at refreshing than Xcode’s preview canvas, possibly because it can’t be used to inspect and configure Views. In other words, the iPad can display the SwiftUI, but you can’t tap on an element and get a drop-down window of properties you can modify, like in Xcode.

Better Programming

Advice for programmers.

Sign up for The Best of Better Programming

By Better Programming

A weekly newsletter sent every Friday with the best articles we published that week. Code tutorials, advice, career opportunities, and more! Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Thanks to Zack Shapiro

Rob Sturgeon

Written by

An iOS developer who writes about gadgets, startups and cybersecurity. Swift programming tutorials and SwiftUI documentation too. robsturgeon.com

Better Programming

Advice for programmers.

Rob Sturgeon

Written by

An iOS developer who writes about gadgets, startups and cybersecurity. Swift programming tutorials and SwiftUI documentation too. robsturgeon.com

Better Programming

Advice for programmers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store