Clock

A clock has to update every second without you touching it. That means the app needs to drive itself — no button taps required. This is your introduction to time-driven UI.

What you'll build

A clock face showing the current time, updating every second. Could be digital (formatted text) or analog (hands drawn with shapes and rotation).

Key concepts

TimelineView — SwiftUI's built-in view for time-based updates. It re-renders its content on a schedule you specify.

TimelineView(.periodic(from: .now, by: 1.0)) { context in
    Text(context.date, style: .time)
        .font(.system(size: 60, weight: .thin, design: .monospaced))
}

Date formatting — SwiftUI can format dates directly in a Text view using the style: parameter.

// Digital clock
Text(Date.now, style: .time)

// Full formatted string
Text(Date.now.formatted(date: .omitted, time: .standard))

Analog clock hands — Draw a clock hand as a Rectangle and use .rotationEffect() with an angle derived from the current time.

let seconds = Calendar.current.component(.second, from: date)
let angle = Angle(degrees: Double(seconds) / 60.0 * 360.0)

Rectangle()
    .frame(width: 2, height: 80)
    .offset(y: -40)
    .rotationEffect(angle)

TimelineView vs Timer

TimelineView is the SwiftUI-native way to drive time-based updates. It's cleaner than a Timer + @State approach because it doesn't require managing the timer lifecycle. Use it when the view should update on a schedule.

Download and run it

Open the Playgrounds file from GitHub, hit Run, and watch time pass.