Create & Preview a SwiftUI View

Written by Team Kodeco

SwiftUI is Apple’s modern UI framework, that lets you create beautiful, responsive user interfaces for iOS, macOS, watchOS and tvOS using declarative syntax, which is easy to read and maintain. With SwiftUI, you can create a SwiftUI view, a lightweight and lazy UI component, using simple code instead of massive storyboards or XIB files as in traditional iOS development.

In this entry, we will show you how to create a new SwiftUI view, add some basic elements to it and then preview it.

Open Xcode and create a new project using the iOS App template. Name your project, and make sure Interface is set to SwiftUI (the default).

Open ContentView.swift and replace the contents of the file with the following:

import SwiftUI

struct ContentView: View {
  var body: some View {
    Text("Hello, SwiftUI!")
  }
}

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

On the right side of the screen, you should see a preview window, showing the result of the code you just wrote:

How it works

Let’s review this code line by line.

import SwiftUI

This line imports the SwiftUI framework, which provides the building blocks for creating user interfaces in SwiftUI.

struct ContentView: View {

This line defines a new struct named ContentView. In SwiftUI, views are represented as structs that conform to the View protocol. ContentView is a struct that conforms to the View protocol.

var body: some View {

This line defines a computed property named body, which you can think of as a reusable recipe. some View indicates that body will output something that qualifies as a View. However, it doesn’t specify exactly what type of View. The details of the View are defined within the code that follows this line.

Text("Hello, SwiftUI!")

This line creates a new Text view with the string “Hello, SwiftUI!” as its content. In SwiftUI, Text is a view that displays a string of text on the screen.

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

This code defines a PreviewProvider struct for the ContentView view in SwiftUI. The previews property of the PreviewProvider struct returns an instance of the ContentView view, which is used to provide a preview of the view’s appearance and behavior in Xcode’s Canvas editor without having to run the app in a simulator.

So, putting it all together, the code defines a new ContentView struct that conforms to the View protocol. The body property of ContentView returns a Text view that displays the string “Hello, SwiftUI!” on the screen. Finally, the code sets up a preview of the ContentView in Xcode’s Canvas editor.

Congratulations! You just created your first SwiftUI view, and were able to preview it in Xcode. Next, let’s learn how to create more complex SwiftUI views and hierarchies.

Note: You can change the preview device by selecting a device from the preview window’s top bar or using the Command-Shift-2 keyboard shortcut.