Learn Swiftui - 9 Code Examples & CST Typing Practice Test

SwiftUI is Apple’s declarative framework for building user interfaces across iOS, macOS, watchOS, and tvOS using Swift. It allows developers to create fully native apps with less code and real-time previews.

View all 9 Swiftui code examples →

SwiftUI Simple Todo App SwiftUI Counter App SwiftUI Step Counter SwiftUI Dark Mode Counter SwiftUI Multi Counter SwiftUI Auto Increment Counter SwiftUI Todo With Priority SwiftUI Countdown Timer SwiftUI Counter With Alert

Learn SWIFTUI with Real Code Examples

Updated Nov 23, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

SwiftUI Simple Todo App

import SwiftUI

struct ContentView: View {
    @State private var todos: [String] = []
    @State private var newTodo: String = ""

    var body: some View {
        NavigationView {
        VStack {
        HStack {
        TextField("New Todo", text: $newTodo)
        .textFieldStyle(RoundedBorderTextFieldStyle())
        Button("Add") {
        if !newTodo.isEmpty {
        todos.append(newTodo)
        newTodo = ""
        }
        }
        }.padding()
        List(todos, id: \ .self) { todo in
        Text(todo)
        }
        }
        .navigationTitle("Todo App")
        }
    }
}

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

Demonstrates a simple SwiftUI app with a Todo list, adding tasks, and displaying them using SwiftUI List and State management.

Let’s Try →

SwiftUI Counter App

import SwiftUI

struct CounterView: View {
    @State private var count: Int = 0

    var body: some View {
        VStack(spacing: 20) {
        Text("Counter: \(count)")
        .font(.largeTitle)
        HStack {
        Button("+") { count += 1 }
        Button("-") { count -= 1 }
        Button("Reset") { count = 0 }
        }
        }.padding()
    }
}

@main
struct CounterApp: App {
    var body: some Scene {
        WindowGroup {
        CounterView()
        }
    }
}

A simple counter app with increment, decrement, and reset buttons.

Let’s Try →

SwiftUI Step Counter

import SwiftUI

struct StepCounterView: View {
    @State private var count: Int = 0
    @State private var step: String = "1"

    var body: some View {
        VStack(spacing: 20) {
        Text("Counter: \(count)")
        HStack {
        TextField("Step", text: $step)
        .keyboardType(.numberPad)
        .textFieldStyle(RoundedBorderTextFieldStyle())
        }
        HStack {
        Button("+") { count += Int(step) ?? 1 }
        Button("-") { count -= Int(step) ?? 1 }
        Button("Reset") { count = 0 }
        }
        }.padding()
    }
}

@main
struct StepCounterApp: App {
    var body: some Scene {
        WindowGroup {
        StepCounterView()
        }
    }
}

Counter app with customizable step increment.

Let’s Try →

SwiftUI Dark Mode Counter

import SwiftUI

struct DarkModeCounterView: View {
    @State private var count: Int = 0
    @Environment(\.colorScheme) var colorScheme
    @State private var isDark: Bool = false

    var body: some View {
        VStack(spacing: 20) {
        Text("Counter: \(count)")
        .font(.largeTitle)
        HStack {
        Button("+") { count += 1 }
        Button("-") { count -= 1 }
        Button("Reset") { count = 0 }
        }
        Button("Toggle Theme") { isDark.toggle() }
        }.padding()
        .preferredColorScheme(isDark ? .dark : .light)
    }
}

@main
struct DarkCounterApp: App {
    var body: some Scene {
        WindowGroup {
        DarkModeCounterView()
        }
    }
}

Counter app with light/dark theme toggle.

Let’s Try →

SwiftUI Multi Counter

import SwiftUI

struct MultiCounterView: View {
    @State private var counters: [Int] = [0,0,0]

    var body: some View {
        VStack(spacing: 20) {
        ForEach(counters.indices, id: \.self) { i in
        VStack {
        Text("Counter \(i+1): \(counters[i])")
        HStack {
        Button("+") { counters[i] += 1 }
        Button("-") { counters[i] -= 1 }
        }
        }
        }
        }.padding()
    }
}

@main
struct MultiCounterApp: App {
    var body: some Scene {
        WindowGroup {
        MultiCounterView()
        }
    }
}

Multiple independent counters in a single view.

Let’s Try →

SwiftUI Auto Increment Counter

import SwiftUI

struct AutoCounterView: View {
    @State private var count: Int = 0
    @State private var isRunning: Bool = true

    var body: some View {
        VStack(spacing: 20) {
        Text("Counter: \(count)")
        .font(.largeTitle)
        HStack {
        Button(isRunning ? "Pause" : "Resume") { isRunning.toggle() }
        Button("Reset") { count = 0 }
        }
        }.padding()
        .onAppear {
        Timer.scheduledTimer(withTimeInterval: 1, repeats: true) { _ in
        if isRunning { count += 1 }
        }
        }
    }
}

@main
struct AutoCounterApp: App {
    var body: some Scene {
        WindowGroup {
        AutoCounterView()
        }
    }
}

Counter that automatically increments every second.

Let’s Try →

SwiftUI Todo With Priority

import SwiftUI

struct PriorityTodoView: View {
    @State private var todos: [(task:String, priority:String)] = []
    @State private var newTask: String = ""
    @State private var priority: String = ""

    var body: some View {
        VStack(spacing: 20) {
        HStack {
        TextField("Task", text: $newTask)
        TextField("Priority", text: $priority)
        Button("Add") {
        if !newTask.isEmpty {
        todos.append((newTask, priority))
        newTask = ""; priority = ""
        }
        }
        }.padding()
        List(todos, id: \ .task) { todo in
        Text("\(todo.task) (Priority: \(todo.priority))")
        }
        }
    }
}

@main
struct PriorityTodoApp: App {
    var body: some Scene {
        WindowGroup {
        PriorityTodoView()
        }
    }
}

Todo app where each task has a priority and displays it.

Let’s Try →

SwiftUI Countdown Timer

import SwiftUI

struct CountdownView: View {
    @State private var count: Int = 10

    var body: some View {
        VStack(spacing: 20) {
        Text("Time: \(count)")
        .font(.largeTitle)
        HStack {
        Button("Start") {
        Timer.scheduledTimer(withTimeInterval: 1, repeats: true) { timer in
        if count > 0 { count -= 1 } else { timer.invalidate() }
        }
        }
        Button("Reset") { count = 10 }
        }
        }.padding()
    }
}

@main
struct CountdownApp: App {
    var body: some Scene {
        WindowGroup {
        CountdownView()
        }
    }
}

Countdown timer starting from 10 seconds.

Let’s Try →

SwiftUI Counter With Alert

import SwiftUI

struct AlertCounterView: View {
    @State private var count: Int = 0
    @State private var showAlert: Bool = false

    var body: some View {
        VStack(spacing: 20) {
        Text("Counter: \(count)")
        .font(.largeTitle)
        HStack {
        Button("+") {
        count += 1
        if count == 10 { showAlert = true }
        }
        Button("Reset") { count = 0 }
        }
        }.alert(isPresented: $showAlert) {
        Alert(title: Text("Alert"), message: Text("Count reached 10!"), dismissButton: .default(Text("OK")))
        }.padding()
    }
}

@main
struct AlertCounterApp: App {
    var body: some Scene {
        WindowGroup {
        AlertCounterView()
        }
    }
}

Counter shows an alert when it reaches 10.

Let’s Try →

Frequently Asked Questions about Swiftui

What is Swiftui?

What are the primary use cases for Swiftui?

Native iOS apps with modern UI. macOS desktop apps. watchOS and tvOS apps. Rapid prototyping for Apple platforms. Apps leveraging Swift ecosystem and Apple frameworks

What are the strengths of Swiftui?

Fully native performance. Single codebase across Apple platforms. Minimal boilerplate code with declarative approach. Tight integration with Swift and Apple frameworks. Live preview and hot reload speeds up development

What are the limitations of Swiftui?

Apple platforms only, not cross-platform outside Apple. Requires Swift knowledge. Some complex UI components require UIKit fallback. Limited backward compatibility (iOS 13+). Smaller ecosystem compared to UIKit/React Native for some features

How can I practice Swiftui typing speed?

CodeSpeedTest offers 9+ real Swiftui code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher Gremlin Partiql Haskell Elixir Fsharp View all languages →

Code Sample Descriptions

SwiftUI Simple Todo App

import SwiftUI

struct ContentView: View {
    @State private var todos: [String] = []
    @State private var newTodo: String = ""

    var body: some View {
        NavigationView {
        VStack {
        HStack {
        TextField("New Todo", text: $newTodo)
        .textFieldStyle(RoundedBorderTextFieldStyle())
        Button("Add") {
        if !newTodo.isEmpty {
        todos.append(newTodo)
        newTodo = ""
        }
        }
        }.padding()
        List(todos, id: \ .self) { todo in
        Text(todo)
        }
        }
        .navigationTitle("Todo App")
        }
    }
}

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

Demonstrates a simple SwiftUI app with a Todo list, adding tasks, and displaying them using SwiftUI List and State management.

Let’s Try →

SwiftUI Counter App

import SwiftUI

struct CounterView: View {
    @State private var count: Int = 0

    var body: some View {
        VStack(spacing: 20) {
        Text("Counter: \(count)")
        .font(.largeTitle)
        HStack {
        Button("+") { count += 1 }
        Button("-") { count -= 1 }
        Button("Reset") { count = 0 }
        }
        }.padding()
    }
}

@main
struct CounterApp: App {
    var body: some Scene {
        WindowGroup {
        CounterView()
        }
    }
}

A simple counter app with increment, decrement, and reset buttons.

Let’s Try →

SwiftUI Step Counter

import SwiftUI

struct StepCounterView: View {
    @State private var count: Int = 0
    @State private var step: String = "1"

    var body: some View {
        VStack(spacing: 20) {
        Text("Counter: \(count)")
        HStack {
        TextField("Step", text: $step)
        .keyboardType(.numberPad)
        .textFieldStyle(RoundedBorderTextFieldStyle())
        }
        HStack {
        Button("+") { count += Int(step) ?? 1 }
        Button("-") { count -= Int(step) ?? 1 }
        Button("Reset") { count = 0 }
        }
        }.padding()
    }
}

@main
struct StepCounterApp: App {
    var body: some Scene {
        WindowGroup {
        StepCounterView()
        }
    }
}

Counter app with customizable step increment.

Let’s Try →

SwiftUI Dark Mode Counter

import SwiftUI

struct DarkModeCounterView: View {
    @State private var count: Int = 0
    @Environment(\.colorScheme) var colorScheme
    @State private var isDark: Bool = false

    var body: some View {
        VStack(spacing: 20) {
        Text("Counter: \(count)")
        .font(.largeTitle)
        HStack {
        Button("+") { count += 1 }
        Button("-") { count -= 1 }
        Button("Reset") { count = 0 }
        }
        Button("Toggle Theme") { isDark.toggle() }
        }.padding()
        .preferredColorScheme(isDark ? .dark : .light)
    }
}

@main
struct DarkCounterApp: App {
    var body: some Scene {
        WindowGroup {
        DarkModeCounterView()
        }
    }
}

Counter app with light/dark theme toggle.

Let’s Try →

SwiftUI Multi Counter

import SwiftUI

struct MultiCounterView: View {
    @State private var counters: [Int] = [0,0,0]

    var body: some View {
        VStack(spacing: 20) {
        ForEach(counters.indices, id: \.self) { i in
        VStack {
        Text("Counter \(i+1): \(counters[i])")
        HStack {
        Button("+") { counters[i] += 1 }
        Button("-") { counters[i] -= 1 }
        }
        }
        }
        }.padding()
    }
}

@main
struct MultiCounterApp: App {
    var body: some Scene {
        WindowGroup {
        MultiCounterView()
        }
    }
}

Multiple independent counters in a single view.

Let’s Try →

SwiftUI Auto Increment Counter

import SwiftUI

struct AutoCounterView: View {
    @State private var count: Int = 0
    @State private var isRunning: Bool = true

    var body: some View {
        VStack(spacing: 20) {
        Text("Counter: \(count)")
        .font(.largeTitle)
        HStack {
        Button(isRunning ? "Pause" : "Resume") { isRunning.toggle() }
        Button("Reset") { count = 0 }
        }
        }.padding()
        .onAppear {
        Timer.scheduledTimer(withTimeInterval: 1, repeats: true) { _ in
        if isRunning { count += 1 }
        }
        }
    }
}

@main
struct AutoCounterApp: App {
    var body: some Scene {
        WindowGroup {
        AutoCounterView()
        }
    }
}

Counter that automatically increments every second.

Let’s Try →

SwiftUI Todo With Priority

import SwiftUI

struct PriorityTodoView: View {
    @State private var todos: [(task:String, priority:String)] = []
    @State private var newTask: String = ""
    @State private var priority: String = ""

    var body: some View {
        VStack(spacing: 20) {
        HStack {
        TextField("Task", text: $newTask)
        TextField("Priority", text: $priority)
        Button("Add") {
        if !newTask.isEmpty {
        todos.append((newTask, priority))
        newTask = ""; priority = ""
        }
        }
        }.padding()
        List(todos, id: \ .task) { todo in
        Text("\(todo.task) (Priority: \(todo.priority))")
        }
        }
    }
}

@main
struct PriorityTodoApp: App {
    var body: some Scene {
        WindowGroup {
        PriorityTodoView()
        }
    }
}

Todo app where each task has a priority and displays it.

Let’s Try →

SwiftUI Countdown Timer

import SwiftUI

struct CountdownView: View {
    @State private var count: Int = 10

    var body: some View {
        VStack(spacing: 20) {
        Text("Time: \(count)")
        .font(.largeTitle)
        HStack {
        Button("Start") {
        Timer.scheduledTimer(withTimeInterval: 1, repeats: true) { timer in
        if count > 0 { count -= 1 } else { timer.invalidate() }
        }
        }
        Button("Reset") { count = 10 }
        }
        }.padding()
    }
}

@main
struct CountdownApp: App {
    var body: some Scene {
        WindowGroup {
        CountdownView()
        }
    }
}

Countdown timer starting from 10 seconds.

Let’s Try →

SwiftUI Counter With Alert

import SwiftUI

struct AlertCounterView: View {
    @State private var count: Int = 0
    @State private var showAlert: Bool = false

    var body: some View {
        VStack(spacing: 20) {
        Text("Counter: \(count)")
        .font(.largeTitle)
        HStack {
        Button("+") {
        count += 1
        if count == 10 { showAlert = true }
        }
        Button("Reset") { count = 0 }
        }
        }.alert(isPresented: $showAlert) {
        Alert(title: Text("Alert"), message: Text("Count reached 10!"), dismissButton: .default(Text("OK")))
        }.padding()
    }
}

@main
struct AlertCounterApp: App {
    var body: some Scene {
        WindowGroup {
        AlertCounterView()
        }
    }
}

Counter shows an alert when it reaches 10.

Let’s Try →

Frequently Asked Questions about Swiftui

What is Swiftui?

What are the primary use cases for Swiftui?

Native iOS apps with modern UI. macOS desktop apps. watchOS and tvOS apps. Rapid prototyping for Apple platforms. Apps leveraging Swift ecosystem and Apple frameworks

What are the strengths of Swiftui?

What are the limitations of Swiftui?

How can I practice Swiftui typing speed?

CodeSpeedTest offers 9+ real Swiftui code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.