Introduction to SwiftUI

Building UIs with declarative syntax.

What is SwiftUI?

SwiftUI is Apple's declarative UI framework. Instead of telling the system how to build every button and label step by step, you describe what you want and SwiftUI figures out the rest. Less code, fewer bugs, and your interface updates automatically when data changes.

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, World!")
            .font(.largeTitle)
            .foregroundColor(.blue)
    }
}

Try it Yourself ->

Declarative UI

In UIKit, you'd create a label, set its text, set its font, set its color, and position it manually. In SwiftUI, you just say what you want. The code reads like a description of the interface, not instructions for building it.

struct GreetingView: View {
    let name: String

    var body: some View {
        VStack {
            Text("Hello,")
            Text(name)
                .fontWeight(.bold)
                .foregroundColor(.purple)
        }
        .font(.title)
    }
}

Try it Yourself ->

SwiftUI vs UIKit

UIKit is imperative — you tell it exactly what to do. SwiftUI is declarative — you say what you want. SwiftUI has live previews, less boilerplate, and builds for all Apple platforms. UIKit has more mature APIs and fine-grained control. Most new projects use SwiftUI, but UIKit knowledge still helps.

// UIKit way
let label = UILabel()
label.text = "Hello"
label.font = UIFont.systemFont(ofSize: 24)
label.textColor = .systemBlue
label.textAlignment = .center

// SwiftUI way
Text("Hello")
    .font(.title)
    .foregroundColor(.blue)
    .multilineTextAlignment(.center)

Try it Yourself ->

Xcode Preview Canvas

One of SwiftUI's killer features is the live preview. Write some code and see it render instantly in Xcode — no building, no running on a simulator. Edit your code and the preview updates in real time.

struct Preview: PreviewProvider {
    static var previews: some View {
        ContentView()
        GreetingView(name: "Swift")
    }
}

Try it Yourself ->

The body Property

Every SwiftUI view has a body property that returns some View. This is where your UI lives. The some View return type means "I return a view, but I'm not telling you which one." SwiftUI optimizes this behind the scenes.

struct CardView: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 10) {
            Text("SwiftUI Basics")
                .font(.headline)
            Text("Learn to build beautiful UIs with Swift.")
                .font(.subheadline)
                .foregroundColor(.secondary)
        }
        .padding()
        .background(Color(.systemBackground))
        .cornerRadius(12)
        .shadow(radius: 4)
    }
}

Try it Yourself ->

Building a Simple App

Every SwiftUI app starts with an App struct. It defines the scene — typically a window group. Inside, you point to your first view. That view's body property is where everything begins.

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

struct ContentView: View {
    @State private var message = "Tap the button!"

    var body: some View {
        VStack(spacing: 20) {
            Text(message)
                .font(.title2)

            Button("Change Message") {
                message = "You tapped it!"
            }
            .buttonStyle(.borderedProminent)
        }
        .padding()
    }
}

Try it Yourself ->

🧪 Quick Quiz

What is SwiftUI's declarative approach?

← Async/Await

Views and Modifiers →