The Daily Recipe — iOS Buffet

An In-App Browser, No UIKit Required

2026-10-25T21:00:00-04:00

Showing a web page inside a SwiftUI app used to mean wrapping WKWebView in a UIViewRepresentable, writing a coordinator to forward navigation delegate calls, and pushing KVO updates back into SwiftUI state by hand. iOS 26 replaces all of that with two types from WebKit. WebView is a SwiftUI view. WebPage is an @Observable object holding everything about the loaded page: its title, URL, loading progress and history.

This recipe builds a small reader browser that opens one of this blog’s own recipes, with a progress bar, the page title, back and forward buttons, a share button, and a Summarize button that runs JavaScript on the page to list its sections and estimate the reading time.

Method

1. Import WebKit and describe a summary

WebView and WebPage live in WebKit, so import it alongside SwiftUI. The summary is a plain value the sheet can display:

import SwiftUI
import WebKit

struct PageSummary: Identifiable {
    let id = UUID()
    let title: String
    let minutes: Int
    let headings: [String]
}

2. Put the page on screen

Keep the WebPage in @State and hand it to WebView. Because WebPage is observable, anything you read from it in body, such as title or isLoading, updates the view as the page changes. There’s no delegate to write.

Load the first page from .task. load(_:) returns an async sequence of navigation events that you can iterate to follow each step, but it’s marked @discardableResult, so for a simple browser you can just call it.

struct RecipeBrowser: View {
    let startURL: URL

    @State private var page = WebPage()
    @State private var summary: PageSummary?

    var body: some View {
        NavigationStack {
            WebView(page)
                .overlay(alignment: .top) {
                    if page.isLoading {
                        ProgressView(value: page.estimatedProgress)
                            .progressViewStyle(.linear)
                    }
                }
                .navigationTitle(page.title.isEmpty ? "Loading…" : page.title)
                .navigationBarTitleDisplayMode(.inline)
                .toolbar {
                    ToolbarItemGroup(placement: .bottomBar) {
                        Button("Back", systemImage: "chevron.backward") { goBack() }
                            .disabled(page.backForwardList.backList.isEmpty)
                        Button("Forward", systemImage: "chevron.forward") { goForward() }
                            .disabled(page.backForwardList.forwardList.isEmpty)
                    }
                    ToolbarSpacer(.flexible, placement: .bottomBar)
                    ToolbarItemGroup(placement: .bottomBar) {
                        Button("Summarize", systemImage: "list.bullet.rectangle") {
                            Task { await summarize() }
                        }
                        ShareLink(item: page.url ?? startURL)
                    }
                }
                .sheet(item: $summary) { summary in
                    SummarySheet(summary: summary)
                }
                .task {
                    page.load(startURL)
                }
        }
    }
}

The progress bar sits over the top of the page only while isLoading is true, and estimatedProgress fills it from 0 to 1. The title comes straight from the page’s <title>.

3. Walk the history

backForwardList mirrors the page’s history: backList holds the pages behind the current one and forwardList the ones ahead, which is all the buttons need to decide whether they’re enabled. Its subscript takes a relative offset, so [-1] is the previous page and [1] the next, and loading an item navigates to it. People can also swipe from the edge to go back and forward, which WebView supports out of the box.

extension RecipeBrowser {
    func goBack() {
        if let previous = page.backForwardList[-1] {
            _ = page.load(previous)
        }
    }

    func goForward() {
        if let next = page.backForwardList[1] {
            _ = page.load(next)
        }
    }
}

4. Run JavaScript on the page

callJavaScript takes the body of a JavaScript function, not a complete function, and runs it asynchronously. Whatever the body returns comes back as Swift values: a JavaScript object arrives as a dictionary, an array as an array, and numbers as NSNumber, which casts to Int.

This script collects the text of every h2 and h3 and estimates the reading time at 220 words a minute:

extension RecipeBrowser {
    func summarize() async {
        let script = """
        const headings = [...document.querySelectorAll('h2, h3')]
            .map(heading => heading.textContent.trim())
            .filter(text => text.length > 0);
        const words = document.body.innerText.split(/\\s+/).length;
        return { headings, minutes: Math.max(1, Math.round(words / 220)) };
        """

        guard let result = try? await page.callJavaScript(script) as? [String: Any] else {
            return
        }
        summary = PageSummary(
            title: page.title,
            minutes: result["minutes"] as? Int ?? 1,
            headings: result["headings"] as? [String] ?? []
        )
    }
}

Note the doubled backslash in \\s: it’s inside a Swift string, so Swift sees \\ and JavaScript receives \s.

5. Show the summary

A sheet with a medium detent keeps the page visible behind it:

struct SummarySheet: View {
    let summary: PageSummary

    var body: some View {
        NavigationStack {
            List {
                Section {
                    Label("\(summary.minutes) min read", systemImage: "clock")
                }
                Section("Sections") {
                    ForEach(Array(summary.headings.enumerated()), id: \.offset) { _, heading in
                        Text(heading)
                    }
                }
            }
            .navigationTitle(summary.title)
            .navigationBarTitleDisplayMode(.inline)
        }
        .presentationDetents([.medium, .large])
    }
}

The headings are listed by position rather than by their text, since a page can repeat a heading.

Plating

The browser opens on the 3D charts recipe from this blog, with a thin progress bar across the top while it loads and the post’s title in the navigation bar. Back is disabled until you follow a link; tap one and it lights up. Tap Summarize and a sheet slides up halfway, with the reading time and the post’s headings in order. The first one is the post’s subtitle, because this blog’s layout marks up the subtitle as an h2; the script reports the page as it’s really built. After it come Method, the numbered steps, Plating, and Kitchen notes.

Page

Summary

iPad

FIG. 1 — One of this blog's recipes in the in-app browser, and the summary the JavaScript pulls out of it.

Kitchen notes

For a page you only need to show, WebView(url:) is enough. Reach for WebPage when you need its state, its history, or JavaScript.
If the script’s function body doesn’t return anything, callJavaScript returns nil; if it explicitly returns null, you get NSNull. Cast the result rather than assuming its type.
WebPage.Configuration sets up things like private browsing, with websiteDataStore = .nonPersistent(), before the page is created.
To decide which links stay in your app and which open in Safari, give the page a navigation decider: WebPage(configuration:navigationDecider:) takes a type conforming to WebPage.NavigationDeciding.
Set isInspectable to true in debug builds and you can inspect the page with Safari’s Web Inspector, just as with WKWebView.

3D Charts: A Surface You Can Spin

2026-10-15T21:00:00-04:00

Some data has three dimensions and a flat chart hides one of them. In iOS 26, Swift Charts adds Chart3D: the same declarative marks you know from 2D charts, plus a z axis, rendered in real 3D and rotatable with a drag.

This recipe makes two dishes from the kitchen. One is a heat map of an oven rack as a 3D surface, showing the hot spot near the back element. The other is a scatter plot of cookie test bakes: bake time and dough thickness along the floor, taste rating as height, and oven temperature as color, with buttons to snap the camera to the front or top view.

Method

1. Set out the data

Chart3D lives in Charts, and the pose angles use Angle2D from Apple’s Spatial framework, so import both. The cookie data is twenty test batches, each with a taste score from 1 to 5. The scores are made up for the recipe, peaking around 11 minutes, 180 °C and 8 mm.

import Charts
import Spatial
import SwiftUI

struct CookieBatch: Identifiable {
    let id: Int
    let minutes: Double
    let temperature: Double
    let thickness: Double
    let rating: Int

    static let samples: [CookieBatch] = (0..<20).map { i -> CookieBatch in
        let minutes = 8 + Double(i % 5) * 1.5
        let temperature = 160 + Double(i / 5) * 15
        let thickness = 6 + Double((i * 3) % 5)
        let miss = abs(minutes - 11) / 1.5 + abs(temperature - 180) / 15 + abs(thickness - 8) / 2
        return CookieBatch(
            id: i, minutes: minutes, temperature: temperature, thickness: thickness,
            rating: max(1, 5 - Int(miss.rounded()))
        )
    }
}

2. Plot a surface

SurfacePlot draws a function of two variables. One detail to get right: in Swift Charts 3D, y is the vertical axis, so the function takes x and z and returns y. Here x and z are positions on a 60 by 40 cm oven rack and y is the temperature there, rising toward the back with a hot spot near the back-left corner.

.foregroundStyle(.heightBased) colors the surface by its y value, which makes the shape easy to read from any angle. Binding a Chart3DPose to .chart3DPose(_:) is all it takes to make the chart interactive: the reader drags to turn it.

struct OvenHeatMap: View {
    @State private var pose: Chart3DPose = .default

    var body: some View {
        Chart3D {
            SurfacePlot(x: "Width (cm)", y: "Temperature (°C)", z: "Depth (cm)") { x, z in
                let hotSpot = exp(-(pow(x - 15, 2) + pow(z - 35, 2)) / 300)
                return 168 + 0.3 * z + 35 * hotSpot
            }
            .foregroundStyle(.heightBased)
        }
        .chartXScale(domain: 0...60)
        .chartZScale(domain: 0...40)
        .chartYScale(domain: 160...220)
        .chart3DPose($pose)
        .aspectRatio(1, contentMode: .fit)
    }
}

Set all three scales explicitly, so the chart covers the rack’s real 60 by 40 cm and a fixed temperature range rather than whatever range the data happens to span. The .aspectRatio(1, contentMode: .fit) is there because, in our runs, a 3D chart given a tall space drew itself wider than the screen and lost its edges; constraining it to a square that fits the width keeps the whole box and its labels in view.

3. Scatter points in 3D

PointMark gains an init(x:y:z:) for 3D charts. Two lessons from the test kitchen shaped this one.

First, mind the proportions. In our simulator runs, Chart3D sized its box from the axis domains in their own units, so a first draft with temperature on the y axis (a 65-degree span) next to bake time (8 minutes) came out as a tall, thin column. Putting the taste rating on y instead gives three axes with similar spans (7, 6 and 5), and the best batches literally rise to the top.

Second, color. A 3D PointMark has .foregroundStyle(by:) like its 2D cousin, but in our runs, coloring by the numeric rating left every point the same blue. Setting each point’s color directly with .foregroundStyle(_:) works, and it lets temperature be the color here.

The pose doesn’t have to come from a drag. Chart3DPose has presets such as .front, .top and .default, plus init(azimuth:inclination:) for a custom angle. Setting it from a button jumps the camera, and the reader can still drag from there. The camera projection is a setting too: .perspective makes nearer points look bigger, and .orthographic keeps sizes constant, which makes it easier to compare positions along an axis.

struct CookieTrials: View {
    let batches: [CookieBatch]
    @State private var pose = Chart3DPose(azimuth: .degrees(35), inclination: .degrees(20))
    @State private var isPerspective = true

    var body: some View {
        VStack(spacing: 16) {
            Chart3D(batches) { batch in
                PointMark(
                    x: .value("Bake time (min)", batch.minutes),
                    y: .value("Rating", batch.rating),
                    z: .value("Thickness (mm)", batch.thickness)
                )
                .foregroundStyle(Self.color(for: batch.temperature))
            }
            .chartXScale(domain: 7.5...14.5)
            .chartYScale(domain: 0...5)
            .chartZScale(domain: 5...11)
            .chart3DPose($pose)
            .chart3DCameraProjection(isPerspective ? .perspective : .orthographic)

            HStack {
                Button("Front") { withAnimation { pose = .front } }
                Button("Top") { withAnimation { pose = .top } }
                Button("Reset") { withAnimation { pose = .default } }
                Spacer()
                Toggle("Perspective", isOn: $isPerspective)
                    .fixedSize()
            }
            .buttonStyle(.bordered)

            HStack(spacing: 12) {
                ForEach([160.0, 175, 190, 205], id: \.self) { temperature in
                    Label("\(Int(temperature)) °C", systemImage: "circle.fill")
                        .foregroundStyle(Self.color(for: temperature))
                }
            }
            .font(.caption)
        }
    }

    static func color(for temperature: Double) -> Color {
        switch temperature {
        case ..<170: .blue
        case ..<185: .green
        case ..<200: .orange
        default: .red
        }
    }
}

The row of labels under the chart is a hand-made legend, since the colors are set directly rather than through a scale.

4. Serve both on one screen

Dragging a 3D chart and scrolling a page fight over the same gesture, so don’t put these charts in a ScrollView. A segmented picker switches between them instead:

struct ChartsKitchenScreen: View {
    enum Dish: String, CaseIterable, Identifiable {
        case oven = "Oven"
        case cookies = "Cookies"
        var id: Self { self }
    }

    @State private var dish = Dish.oven

    var body: some View {
        NavigationStack {
            VStack(spacing: 20) {
                Picker("Chart", selection: $dish) {
                    ForEach(Dish.allCases) { dish in
                        Text(dish.rawValue).tag(dish)
                    }
                }
                .pickerStyle(.segmented)

                switch dish {
                case .oven: OvenHeatMap()
                case .cookies: CookieTrials(batches: CookieBatch.samples)
                }
            }
            .padding()
            .navigationTitle(dish == .oven ? "Oven Heat Map" : "Cookie Trials")
        }
    }
}

Plating

The oven opens on a colored surface tilted toward you: cool colors along the front of the rack, warming toward the back, and a peak in the back-left corner where the element runs hottest. Drag across it to turn the rack and look at the hot spot from other sides. Switch to Cookies and twenty points float in a box: the higher a point, the better that batch tasted, and the colors show which oven temperature it came from. Tap Top and the camera looks straight down at bake time against thickness; tap Reset to go back.

Oven

From the top

FIG. 1 — The oven rack's temperature as a surface, and the cookie test bakes in 3D, seen from the default angle and from the top.

Kitchen notes

Chart3D is available on iOS, iPadOS, macOS and visionOS 26, not on tvOS or watchOS. chart3DCameraProjection is listed for iOS, iPadOS and macOS only, so leave it out of visionOS builds.
Apple’s documentation lists 3D initializers for PointMark, RuleMark and RectangleMark, alongside the 3D-only SurfacePlot.
In our runs the axes were titled X, Y and Z, not with the names passed to .value or SurfacePlot. Say what each axis means in the text or a caption around the chart.
.foregroundStyle(.normalBased) colors a surface by the direction it faces instead of its height, which helps when two surfaces overlap in the same chart.
A 3D chart is harder to read precisely than a 2D one. Pair it with a plain summary, or a 2D chart of the slice that matters, for readers who need exact values.

Custom Animated Shapes with @Animatable

2026-10-07T22:00:00-04:00

SwiftUI animates a shape by interpolating one value, animatableData, between the old shape and the new one. For a shape with one changing number that’s easy. For a shape with three, you had to pack them into nested AnimatablePairs and unpack them again in a setter, and every new property meant editing that tower of generics. Xcode 26 adds the @Animatable macro, which reads your shape’s stored properties and writes animatableData for you.

This recipe makes a batter gauge for a baking app: a round bowl whose batter level animates when you add or pour, sloshes on every change, and keeps a gentle ripple moving the rest of the time.

Method

1. Draw the wave

The gauge is built from a wave shape: a sine curve at a given fill level, closed off along the bottom. The drawing code is shared by both versions of the shape below, so it lives in a function. It’s marked nonisolated because Shape.path(in:) is a nonisolated requirement and calls it; more on that in step 3.

/// A sine-wave water line at `level` (0 = empty, 1 = full), filled to the bottom.
nonisolated func wavePath(
    in rect: CGRect, level: CGFloat, amplitude: CGFloat, phase: CGFloat, crests: Int
) -> Path {
    var path = Path()
    let baseline = rect.maxY - rect.height * level
    let wavelength = rect.width / CGFloat(crests)

    path.move(to: CGPoint(x: rect.minX, y: rect.maxY))
    for x in stride(from: rect.minX, through: rect.maxX, by: 2) {
        let angle = (x - rect.minX) / wavelength * 2 * .pi + phase
        path.addLine(to: CGPoint(x: x, y: baseline + sin(angle) * amplitude))
    }
    path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
    path.closeSubpath()
    return path
}

2. The old way, for comparison

Before the macro, animating both the level and the wave height meant writing animatableData by hand. Two properties need one AnimatablePair; three would need a pair inside a pair.

nonisolated struct WaveWithoutMacro: Shape {
    var level: CGFloat
    var amplitude: CGFloat
    var phase: CGFloat = 0
    var crests = 2

    var animatableData: AnimatablePair<CGFloat, CGFloat> {
        get { AnimatablePair(level, amplitude) }
        set {
            level = newValue.first
            amplitude = newValue.second
        }
    }

    func path(in rect: CGRect) -> Path {
        wavePath(in: rect, level: level, amplitude: amplitude, phase: phase, crests: crests)
    }
}

3. The new way

With @Animatable, the getter and setter disappear. The macro builds animatableData from the stored properties, and @AnimatableIgnored leaves a property out. Here two properties are left out, for different reasons. crests is an Int, which can’t be interpolated smoothly. phase could be, but it’s driven by a clock (step 4), and if it were animatable, every level change would also try to tween the ripple from its old position to its new one.

@Animatable
nonisolated struct Wave: Shape {
    var level: CGFloat
    var amplitude: CGFloat
    @AnimatableIgnored var phase: CGFloat
    @AnimatableIgnored var crests = 2

    func path(in rect: CGRect) -> Path {
        wavePath(in: rect, level: level, amplitude: amplitude, phase: phase, crests: crests)
    }
}

About that nonisolated. SwiftUI declares Shape as a nonisolated protocol that refines Sendable, with a nonisolated path(in:): shapes are plain values that SwiftUI can ask for a path wherever it’s rendering. A new Xcode 26 project isolates code to the main actor by default, so mark custom shapes nonisolated to match the protocol.

4. Make it slosh and ripple

Three kinds of motion meet in the gauge, and each comes from a different place:

The ripple runs constantly. A TimelineView(.animation) redraws every frame and computes phase from the clock, which loops seamlessly because the wave repeats every 2π. It pauses when Reduce Motion is on.
The slosh happens on every level change. PhaseAnimator steps a slosh value through 0, 1, 0.4 and back to 0 whenever level changes, and the wave’s amplitude follows it. That only animates smoothly because amplitude is part of the macro-generated animatableData.
The level itself springs to its new value through an ordinary .animation(_:value:).

The views keep level as a Double, which Swift converts to the shape’s CGFloat automatically, so the percentage label can use the standard .percent format.

struct BatterGauge: View {
    var level: Double
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        PhaseAnimator([0, 1, 0.4, 0] as [CGFloat], trigger: level) { slosh in
            TimelineView(.animation(paused: reduceMotion)) { context in
                let seconds = context.date.timeIntervalSinceReferenceDate
                let phase = CGFloat(seconds.truncatingRemainder(dividingBy: 2) * .pi)

                ZStack {
                    Wave(level: level, amplitude: 4 + 12 * slosh, phase: phase)
                        .fill(.orange.opacity(0.4))
                    Wave(level: level, amplitude: 3 + 9 * slosh, phase: phase + .pi, crests: 3)
                        .fill(.orange)
                }
            }
        } animation: { _ in
            .spring(duration: 0.4)
        }
        .animation(.spring(duration: 0.8), value: level)
        .background(.orange.opacity(0.08))
        .clipShape(.circle)
        .overlay {
            Circle().stroke(.orange, lineWidth: 4)
        }
        .overlay {
            Text(level, format: .percent.precision(.fractionLength(0)))
                .font(.system(size: 44, weight: .bold, design: .rounded))
                .monospacedDigit()
                .contentTransition(.numericText(value: level))
                .shadow(color: .white.opacity(0.8), radius: 6)
        }
    }
}

5. Put it on a screen

Two glass buttons change the level in steps of 20 percent:

struct MixingBowlScreen: View {
    @State private var level = 0.35

    var body: some View {
        VStack(spacing: 32) {
            Text("Batter")
                .font(.title2.bold())

            BatterGauge(level: level)
                .frame(width: 240, height: 240)

            HStack(spacing: 16) {
                Button("Pour Out", systemImage: "minus") {
                    level = max(level - 0.2, 0)
                }
                Button("Add Batter", systemImage: "plus") {
                    level = min(level + 0.2, 1)
                }
            }
            .buttonStyle(.glass)
        }
    }
}

Plating

The bowl opens about a third full, with two layers of orange batter rippling slowly against each other. Tap Add Batter and the level springs up while the surface sloshes higher, then settles back to its ripple; the percentage counts up with the numeric text transition. Pour Out does the same in reverse. Turn on Reduce Motion and the ripple stops, while the level changes still animate.

35 percent

75 percent

FIG. 1 — The gauge at 35 percent, and after two taps of Add Batter.

Kitchen notes

The macro works with stored properties only. Computed properties are skipped, so derive values inside path(in:) rather than storing them twice.
Use @AnimatableIgnored for anything that shouldn’t be interpolated: counts, flags, enum cases, and values that come from somewhere else, like the clock-driven phase here.
If a type already conforms to Animatable, the macro doesn’t add the conformance again, but it still writes animatableData. Shape already conforms, and Apple’s own example of the macro is a shape.
Apple lists the macro as available back to iOS 13. It runs at compile time, so it needs Xcode 26, not iOS 26 on the device. The gauge here needs iOS 17 for PhaseAnimator, and the glass buttons need iOS 26.
For motion that never stops, a TimelineView that computes values from the date is easier to reason about than a repeatForever animation. A repeating animation and a one-off spring on the same shape would both be animating the same animatableData, which makes the result hard to predict.

Rich Text Notes Editor

2026-10-03T01:00:00-04:00

Until iOS 26, a SwiftUI TextEditor could only hold a plain String. If your notes app needed a bold word, you wrapped UITextView and spent an afternoon on coordinators and attribute dictionaries. Now TextEditor takes an AttributedString directly, keeps the formatting as the person types, and hands you the selection so your own buttons can change it.

This recipe builds a recipe-notes screen: an editor that starts with a formatted note, plus a floating glass bar with bold, italic, underline and text-size controls that always reflect the text under the cursor.

Method

1. Start with some formatted text

An AttributedString carries SwiftUI attributes such as font and underlineStyle per run of characters. Build the starting note from a few runs so there’s something to edit:

extension AttributedString {
    static var sampleNote: AttributedString {
        var title = AttributedString("Sunday Pancakes\n")
        title.font = .title.bold()

        var intro = AttributedString("Rest the batter for ")
        var rest = AttributedString("ten minutes")
        rest.font = .body.italic()
        var tip = AttributedString(" before cooking. The pan should be ")
        var heat = AttributedString("medium-low")
        heat.underlineStyle = .single
        var end = AttributedString(", or the outside burns before the middle sets.\n\nAdd blueberries after pouring, never into the bowl.")

        intro.font = .body
        tip.font = .body
        end.font = .body
        return title + intro + rest + tip + heat + end
    }
}

2. Bind the editor to text and selection

TextEditor(text:selection:) takes two bindings. The text is the document; the AttributedTextSelection is where the cursor or highlighted range is. You need the selection for any control that formats “the current text”, so keep both in state:

struct NotesEditor: View {
    @State private var text = AttributedString.sampleNote
    @State private var selection = AttributedTextSelection()

    var body: some View {
        NavigationStack {
            TextEditor(text: $text, selection: $selection)
                .contentMargins(.horizontal, 16, for: .scrollContent)
                .attributedTextFormattingDefinition(NotesFormatting())
                .safeAreaInset(edge: .bottom) {
                    FormattingBar(text: $text, selection: $selection)
                        .padding(.horizontal)
                        .padding(.bottom, 8)
                }
                .navigationTitle("Recipe Notes")
        }
    }
}

The bar sits in a bottom safe-area inset, so it floats over the end of the text and moves up with the keyboard when editing starts.

3. Read the formatting under the cursor

A bold toggle needs to show whether the current text is bold. Two calls get you there. selection.typingAttributes(in: text) returns the attributes that new typing would get at the selection. Its font is often a semantic font like .body, which can’t tell you whether it’s bold until it’s resolved for the current environment, so resolve it with the fontResolutionContext from the environment.

Writing goes through transformAttributes(in:). It runs your closure on every run inside the selection, or on the typing attributes when the selection is just a cursor. The selection is passed inout, so the editor’s selection stays in step with the edited text.

struct FormattingBar: View {
    @Binding var text: AttributedString
    @Binding var selection: AttributedTextSelection
    @Environment(\.fontResolutionContext) private var fontResolutionContext

    private var currentFont: Font.Resolved {
        let font = selection.typingAttributes(in: text).font ?? .default
        return font.resolve(in: fontResolutionContext)
    }

    var body: some View {
        HStack(spacing: 4) {
            Toggle("Bold", systemImage: "bold", isOn: Binding(
                get: { currentFont.isBold },
                set: { isOn in
                    text.transformAttributes(in: &selection) {
                        $0.font = ($0.font ?? .default).bold(isOn)
                    }
                }
            ))
            Toggle("Italic", systemImage: "italic", isOn: Binding(
                get: { currentFont.isItalic },
                set: { isOn in
                    text.transformAttributes(in: &selection) {
                        $0.font = ($0.font ?? .default).italic(isOn)
                    }
                }
            ))
            Toggle("Underline", systemImage: "underline", isOn: Binding(
                get: { selection.typingAttributes(in: text).underlineStyle != nil },
                set: { isOn in
                    text.transformAttributes(in: &selection) {
                        $0.underlineStyle = isOn ? .single : nil
                    }
                }
            ))

            Divider().frame(height: 24)

            Button("Smaller", systemImage: "textformat.size.smaller") { scale(by: 1 / 1.2) }
            Button("Larger", systemImage: "textformat.size.larger") { scale(by: 1.2) }
        }
        .toggleStyle(.button)
        .labelStyle(.iconOnly)
        .font(.title3)
        .padding(8)
        .glassEffect()
    }

    private func scale(by factor: CGFloat) {
        text.transformAttributes(in: &selection) {
            $0.font = ($0.font ?? .default).scaled(by: factor)
        }
    }
}

Font.bold(_:), italic(_:) and scaled(by:) are new in iOS 26. They take a flag or a factor, which suits toggles better than the older bold() that could only add weight.

4. Decide which formatting is allowed

People can also format text with the system controls in the edit menu, so your rules need to hold no matter where the formatting comes from. An AttributedTextFormattingDefinition lists constraints on attribute values, and SwiftUI applies them to text in the editor. This one allows no underline or a single solid one. A double or dashed underline, pasted in from elsewhere, is corrected to .single:

struct NotesFormatting: AttributedTextFormattingDefinition {
    var body: some AttributedTextFormattingDefinition<AttributeScopes.SwiftUIAttributes> {
        ValueConstraint(
            for: \.underlineStyle,
            values: [nil, .single],
            default: .single
        )
    }
}

SwiftUI also uses the definition to adjust its own formatting UI, so the system controls only offer options that fit your rules.

Plating

The note opens with a large bold title and the body underneath it, with “ten minutes” in italics and “medium-low” underlined. The formatting bar floats at the bottom in a glass capsule. Put the cursor in the title and the bold toggle lights up; move it into “ten minutes” and italic lights up instead. Select a phrase and tap Larger a few times, and it grows in steps of 20 percent while the rest of the paragraph stays put.

Note

Editing

iPad

FIG. 1 — The note as it opens, and with the cursor in the bold title: the Bold toggle switches on to match.

Kitchen notes

Fonts in the attributed string override the environment. Runs with no font attribute use whatever .font() the editor inherits, so you can set the base style for unformatted text with an ordinary .font() modifier.
The editor doesn’t convert UIKit or AppKit attributes. Text pasted or loaded with NSAttributedString keys (an RTF file, say) won’t show its formatting until you convert it into SwiftUI attributes. Apple’s documentation points to Transferable for importing RTF.
If your own bar is the only formatting UI you want, hide the system controls with .textInputFormattingControlVisibility(_:for:).
The toggle labels stay in place for VoiceOver even though only the icons show, and .toggleStyle(.button) reports each one’s on or off state.

Morphing Glass Buttons

2026-10-01T20:30:00-04:00

The most striking thing about Liquid Glass isn’t the blur. It’s that glass behaves like a liquid: tap the button in Maps or Camera and new controls don’t fade in, they bead off the original button and slide into place, and when you dismiss them they flow back in. SwiftUI in iOS 26 gives you exactly that behaviour, and it takes three things: glass on each control, a container that lets the shapes see each other, and an identity for each shape so SwiftUI knows which one becomes which.

This recipe builds a floating action button over a photo that blooms into three actions, a Maps-style zoom control, and a save bar using the stock glass button styles.

Method

1. Name the actions

Each morphing shape needs a stable identity. An enum is the natural fit. One Swift 6.2 detail matters here: glassEffectID requires its identifier to be Sendable as well as Hashable. New Xcode 26 projects isolate code to the main actor by default, which can make a plain enum’s conformances main-actor isolated, so mark the enum nonisolated to keep it usable as a glass ID anywhere.

nonisolated enum KitchenAction: String, CaseIterable, Identifiable {
    case timer, note, photo

    var id: Self { self }
    var title: String { rawValue.capitalized }
    var systemImage: String {
        switch self {
        case .timer: "timer"
        case .note: "note.text"
        case .photo: "camera"
        }
    }
}

2. Build the cluster

Every button gets .glassEffect with .interactive(), which makes the glass respond to touch: it flexes and brightens under your finger. The toggle is tinted orange so it reads as the primary control. Wrapping them all in a GlassEffectContainer is what lets the shapes interact, and .glassEffectID ties each one to an identity in a shared namespace. When isExpanded changes inside withAnimation, SwiftUI morphs the glass: new buttons emerge from the toggle’s shape, and collapse back into it.

struct GlassActionCluster: View {
    @State private var isExpanded = false
    @Namespace private var glass

    var body: some View {
        GlassEffectContainer(spacing: 12) {
            VStack(spacing: 16) {
                if isExpanded {
                    ForEach(KitchenAction.allCases) { action in
                        Button {
                            perform(action)
                        } label: {
                            Label(action.title, systemImage: action.systemImage)
                                .labelStyle(.iconOnly)
                                .font(.title2)
                                .frame(width: 56, height: 56)
                        }
                        .buttonStyle(.plain)
                        .glassEffect(.regular.interactive(), in: .circle)
                        .glassEffectID(action, in: glass)
                    }
                }

                Button {
                    withAnimation(.bouncy) { isExpanded.toggle() }
                } label: {
                    Image(systemName: isExpanded ? "xmark" : "plus")
                        .font(.title2.weight(.semibold))
                        .foregroundStyle(.white)
                        .frame(width: 64, height: 64)
                        .contentTransition(.symbolEffect(.replace))
                }
                .buttonStyle(.plain)
                .glassEffect(.regular.tint(.orange).interactive(), in: .circle)
                .glassEffectID("toggle", in: glass)
                .accessibilityLabel(isExpanded ? "Close actions" : "More actions")
            }
        }
    }

    private func perform(_ action: KitchenAction) {
        // Start the timer, open the note editor, show the camera…
        withAnimation(.bouncy) { isExpanded = false }
    }
}

The container’s spacing controls when shapes start to blend: the higher the value, the sooner two shapes reach for each other as they approach. Here it’s smaller than the stack’s 16-point gap, so at rest the buttons sit apart as separate drops, and only merge while they’re moving through each other.

3. Fuse two controls into one pill

Sometimes you want the opposite: separate buttons that render as one piece of glass, like the zoom control in Maps. .glassEffectUnion does this. Every glass effect with the same union ID, shape and variant is combined into a single shape.

struct ZoomPill: View {
    @Binding var zoom: Double
    @Namespace private var glass

    var body: some View {
        GlassEffectContainer {
            VStack(spacing: 0) {
                Button("Zoom In", systemImage: "plus") {
                    zoom = min(zoom + 0.25, 3)
                }
                .frame(width: 48, height: 48)
                .glassEffect(.regular.interactive())
                .glassEffectUnion(id: "zoom", namespace: glass)

                Button("Zoom Out", systemImage: "minus") {
                    zoom = max(zoom - 0.25, 1)
                }
                .frame(width: 48, height: 48)
                .glassEffect(.regular.interactive())
                .glassEffectUnion(id: "zoom", namespace: glass)
            }
            .labelStyle(.iconOnly)
            .font(.title3)
            .buttonStyle(.plain)
        }
    }
}

4. Use the stock styles for ordinary buttons

Not every button needs hand-built glass. For standard actions, iOS 26 adds two button styles: .glass for secondary actions and .glassProminent for the primary one, which fills the glass with the tint colour.

struct SaveBar: View {
    var body: some View {
        HStack(spacing: 12) {
            Button("Discard") { }
                .buttonStyle(.glass)

            Button("Save Recipe") { }
                .buttonStyle(.glassProminent)
                .tint(.orange)
        }
        .controlSize(.large)
    }
}

5. Plate it over a photo

Glass needs something behind it to bend. Put the photo in the background so it can bleed under the safe areas without affecting the layout, and float the three pieces in the corners with overlays.

struct GlassKitchenScreen: View {
    @State private var zoom = 1.0

    var body: some View {
        Color.clear
            .background {
                Image("hero-pancakes")
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .scaleEffect(zoom)
                    .animation(.smooth, value: zoom)
                    .ignoresSafeArea()
            }
            .overlay(alignment: .topTrailing) {
                ZoomPill(zoom: $zoom)
                    .padding()
            }
            .overlay(alignment: .bottomTrailing) {
                GlassActionCluster()
                    .padding()
            }
            .overlay(alignment: .bottomLeading) {
                SaveBar()
                    .padding()
            }
    }
}

Using .background for the photo, rather than putting it in a stack, matters for the same reason as in the hero header recipe: a fill-mode image reports its natural size, and in a stack that would push the overlays off screen. A background is drawn behind the view without changing its size.

Plating

At rest, the orange “+” floats in the bottom corner over the pancakes, with the zoom pill top-right and the save bar bottom-left. Tap “+” and the three action buttons bead off the top of it and slide up into a column, while the plus turns into a cross. Tap any action, or the cross, and they flow back down into the orange button. The zoom pill reads as one capsule with two halves, and each half flexes on its own when pressed.

At rest

Expanded

iPad

FIG. 1 — The cluster at rest and expanded. The three actions grow out of the orange button's glass and merge back into it when closed.

Kitchen notes

One container per cluster. Shapes only morph and blend with shapes in the same GlassEffectContainer. It also renders them together, which Apple notes is better for performance than many separate glass views.
Glass on glass doesn’t stack. Don’t put a glass button inside a glass card. Glass samples the content behind it, and layers of glass muddy each other; keep glass to the floating layer.
Tint sparingly. A tint marks the primary action. Tinting every button removes the hierarchy it’s there to create.
Label every icon. Icon-only glass buttons still need names: Label with .labelStyle(.iconOnly) keeps the title for VoiceOver, and the toggle’s accessibilityLabel changes with its state.
Variants. .regular is the standard material and the right default. .clear is a more transparent variant; check legibility carefully if you use it, since it lets more of the background through.

Liquid Glass Tab Bar with a Now-Playing Tray

2026-09-29T00:03:00-04:00

Open Music or Podcasts on iOS 26 and the tab bar behaves like a living thing: scroll down and it tucks itself into a small glass capsule, while the mini player slides down to sit beside it. Scroll back up and both spring back into place. Until now, faking this took a custom tab bar and a lot of geometry reading. In iOS 26 it is three modifiers on a stock TabView.

This recipe builds that shell for a music app: three content tabs, a search tab, and a now-playing tray that changes its layout depending on where the system puts it.

Method

1. Model the tabs as values

Give every tab a value so you can drive selection from code, such as jumping to Search from a keyboard shortcut or a deep link. An enum keeps it tidy:

enum AppTab: Hashable {
    case listenNow, radio, library, search
}

@Observable
final class PlayerModel {
    var title = "Clair de Lune"
    var artist = "Claude Debussy"
    var artwork = "cover-debussy"
    var isPlaying = false
    var isFullScreenPresented = false

    func togglePlayback() { isPlaying.toggle() }
    func skip() { /* advance the queue */ }
}

2. Build the shell

The search tab uses the .search role, which does two things for free: the system supplies its label and icon, and on iPhone it is set apart from the other tabs at the trailing edge of the bar. The three modifiers at the bottom do the rest.

struct MusicShell: View {
    @State private var selection: AppTab = .listenNow
    @State private var player = PlayerModel()

    var body: some View {
        TabView(selection: $selection) {
            Tab("Listen Now", systemImage: "play.circle", value: .listenNow) {
                ListenNowView()
            }
            Tab("Radio", systemImage: "dot.radiowaves.left.and.right", value: .radio) {
                RadioView()
            }
            Tab("Library", systemImage: "square.stack", value: .library) {
                LibraryView()
            }
            Tab(value: .search, role: .search) {
                SearchView()
            }
        }
        .tabBarMinimizeBehavior(.onScrollDown)
        .tabViewBottomAccessory {
            NowPlayingTray()
        }
        .fullScreenCover(isPresented: $player.isFullScreenPresented) {
            NowPlayingScreen()
        }
        .environment(player)
    }
}

.tabBarMinimizeBehavior(.onScrollDown) collapses the bar as soon as the reader starts scrolling down, and restores it when they scroll back up. There is also .onScrollUp, .never, and the default, .automatic. Minimizing only happens on iPhone; on iPad the modifier is simply ignored, so you can apply it unconditionally.

3. Make the tray respond to its placement

The accessory is not one fixed shape. When the tab bar is full size, the accessory sits above it as a wide bar. When the bar minimizes, the accessory moves inline, squeezed into the space beside the collapsed tab bar. SwiftUI reports which one is current through the environment, so the tray can drop detail when space is tight:

struct NowPlayingTray: View {
    @Environment(PlayerModel.self) private var player
    @Environment(\.tabViewBottomAccessoryPlacement) private var placement

    var body: some View {
        HStack(spacing: 12) {
            Image(player.artwork)
                .resizable()
                .aspectRatio(1, contentMode: .fill)
                .frame(width: 32, height: 32)
                .clipShape(.rect(cornerRadius: 6))

            if placement == .expanded {
                VStack(alignment: .leading) {
                    Text(player.title).font(.subheadline.weight(.semibold))
                    Text(player.artist).font(.caption).foregroundStyle(.secondary)
                }
                .lineLimit(1)
            } else {
                Text(player.title).font(.subheadline).lineLimit(1)
            }

            Spacer(minLength: 0)

            Button(player.isPlaying ? "Pause" : "Play",
                   systemImage: player.isPlaying ? "pause.fill" : "play.fill") {
                player.togglePlayback()
            }
            if placement == .expanded {
                Button("Next", systemImage: "forward.fill") { player.skip() }
            }
        }
        .labelStyle(.iconOnly)
        .foregroundStyle(.primary)
        .padding(.horizontal)
        .contentShape(.rect)
        .onTapGesture { player.isFullScreenPresented = true }
    }
}

The environment value is optional: it is nil when the view isn’t inside a bottom accessory, which is handy if you reuse the same view elsewhere. Comparing an optional to .expanded works as you’d expect.

4. Give each tab something to scroll

The tab bar only minimizes when there is a scroll view to watch. Any List or ScrollView at the root of a tab works:

struct ListenNowView: View {
    var body: some View {
        NavigationStack {
            List(1...40, id: \.self) { index in
                Text("Album \(index)")
            }
            .navigationTitle("Listen Now")
        }
    }
}

struct SearchView: View {
    @State private var query = ""

    var body: some View {
        NavigationStack {
            List { /* results for query */ }
                .navigationTitle("Search")
                .searchable(text: $query)
        }
    }
}

Plating

Run it on an iPhone simulator and scroll the Listen Now list. The tab bar shrinks to a single glass capsule showing the current tab, and the tray slides down beside it, losing its artist line and Next button. Scroll up and everything expands again. Tap the tray and the full-screen player appears from any tab, because the accessory and the cover live on the TabView, not inside a tab.

Full size

Minimized

iPad

FIG. 1 — The shell at rest, and after scrolling: the tab bar minimizes and the tray moves inline, dropping its artist line and Next button.

Kitchen notes

The tray is global. The accessory shows on every tab, so treat it as app-wide chrome. When nothing is queued, show a quiet “Not Playing” state rather than an empty bar.
Keep inline content short. In the inline placement the tray shares a single row with the collapsed tab bar. An icon and one line of text is the practical limit.
Hit targets. .labelStyle(.iconOnly) keeps the titles for VoiceOver while showing only the icons, so “Play” and “Next” are still announced properly.
Selection is state. Because tabs are values, selection = .search from anywhere in the app switches tabs, which pairs nicely with the deep-link router from NavigationStack Deep Links in Forty Lines.

Edge-to-Edge Hero Header

2026-09-29T00:02:00-04:00

The detail screens in Apple’s own iOS 26 apps share a look: the hero photo doesn’t stop at the navigation bar, it runs right up under it, and on iPad it keeps going underneath the translucent sidebar. Where the list scrolls beneath the toolbar there is no hard line, just a soft fade. None of this needs custom blur views anymore. It comes from a handful of new modifiers.

This recipe builds a recipe-detail screen (a cookbook within a cookbook) with that treatment, inside a split view so it works on both iPhone and iPad.

Method

1. Start with a split view

On iPad the sidebar floats over the detail column as a glass panel. That is exactly where the background extension effect earns its keep. On iPhone the same code collapses into a normal navigation stack.

struct Recipe: Identifiable, Hashable {
    let id = UUID()
    let title: String
    let summary: String
    let heroImage: String
    let minutes: Int
    let servings: Int
    let steps: [String]
}

struct CookbookView: View {
    let recipes: [Recipe]
    @State private var selection: Recipe?

    var body: some View {
        NavigationSplitView {
            List(recipes, selection: $selection) { recipe in
                NavigationLink(recipe.title, value: recipe)
            }
            .navigationTitle("Cookbook")
        } detail: {
            if let selection {
                RecipeDetailView(recipe: selection)
            } else {
                ContentUnavailableView("Pick a Recipe", systemImage: "fork.knife")
            }
        }
    }
}

2. Pull the hero under the bars

Two modifiers do different jobs here, and the difference matters. .ignoresSafeArea(edges: .top) lets the scroll view’s content start at the very top of the screen, so the photo sits under the navigation bar. .backgroundExtensionEffect() then fills any remaining safe-area edges around the image — under the iPad sidebar, or the side insets of an iPhone in landscape — with mirrored, blurred copies of it, so the image appears to continue beneath the glass.

struct RecipeDetailView: View {
    let recipe: Recipe

    var body: some View {
        ScrollView {
            VStack(alignment: .leading, spacing: 0) {
                Color.clear
                    .frame(height: 360)
                    .overlay {
                        Image(recipe.heroImage)
                            .resizable()
                            .aspectRatio(contentMode: .fill)
                    }
                    .clipped()
                    .backgroundExtensionEffect()

                VStack(alignment: .leading, spacing: 12) {
                    Text(recipe.title)
                        .font(.largeTitle.bold())
                    Text(recipe.summary)
                        .foregroundStyle(.secondary)
                    ForEach(Array(recipe.steps.enumerated()), id: \.offset) { index, step in
                        Label(step, systemImage: "\(index + 1).circle")
                    }
                }
                .padding()
            }
        }
        .ignoresSafeArea(edges: .top)
        .scrollEdgeEffectStyle(.soft, for: .top)
        .navigationTitle(recipe.title)
        .navigationSubtitle("\(recipe.minutes) min · Serves \(recipe.servings)")
        .navigationBarTitleDisplayMode(.inline)
        .toolbar { RecipeToolbar() }
    }
}

Why the Color.clear and overlay? An image with .aspectRatio(contentMode: .fill) and only a height still reports its natural width: a landscape photo 360 points tall is wider than an iPhone screen. Put it straight in the stack and it widens the whole column, pushing the title and text off the leading edge; .clipped() hides the overflow but doesn’t fix the layout. Color.clear takes exactly the width it’s offered, so the photo fills that box and nothing more. (Our first draft of this recipe had exactly that bug, and the test kitchen’s screenshots caught it.)

Apply the extension effect to a single background view, not to every image on the screen. Apple’s documentation is explicit about using it with discretion: each use duplicates the view and blurs the copies, and the modifier clips the view so the copies never overlap it.

3. Soften the edge

Scroll views already draw an automatic edge effect where content passes under a toolbar. .scrollEdgeEffectStyle(.soft, for: .top) asks for the subtle, blurred version; .hard gives a crisper, nearly opaque boundary, which suits dense text such as a spreadsheet or a code editor. Pass .automatic to go back to the system choice.

In iOS 26, toolbar items sit on glass, and adjacent items share one glass capsule. Use ToolbarSpacer to split them into groups by meaning: the everyday actions together, the primary action on its own.

struct RecipeToolbar: ToolbarContent {
    var body: some ToolbarContent {
        ToolbarItemGroup(placement: .topBarTrailing) {
            Button("Favourite", systemImage: "heart") { }
            Button("Share", systemImage: "square.and.arrow.up") { }
        }

        ToolbarSpacer(.fixed, placement: .topBarTrailing)

        ToolbarItem(placement: .topBarTrailing) {
            Button("Start Cooking", systemImage: "flame") { }
        }
    }
}

.fixed inserts a standard gap. .flexible expands to fill whatever space is left, which is useful in a bottom toolbar to push items to opposite ends.

Plating

On iPhone the photo fills the top of the screen with the back button and the two toolbar capsules floating over it. Scroll up and the text slides under the toolbar through a soft blur, while the inline title and its “35 min · Serves 4” subtitle take over. On iPad, open the sidebar: instead of the photo stopping at the sidebar’s edge, a blurred reflection of it continues underneath the glass, and the detail column feels full-bleed.

Detail

Scrolled

FIG. 1 — On iPhone the photo runs under the navigation bar; scrolled, the text passes under the toolbar through the soft edge effect.

iPad, landscape

FIG. 2 — On iPad the background extension effect continues the photo beneath the sidebar.

Kitchen notes

Subtitle availability. navigationSubtitle has existed on macOS since 2022 but only arrived on iOS and iPadOS in 26. If you still support iOS 18, guard it with if #available(iOS 26, *) inside a small view modifier.
Legibility over photos. Toolbar glass adapts to what’s behind it, but a very bright or very busy photo can still fight the title. A subtle dark gradient at the top of the image helps more than you’d think.
Hiding a single item’s glass. For an item that should not get the shared glass background, such as a profile avatar, apply .sharedBackgroundVisibility(.hidden) to that ToolbarItem.
One hero per screen. Stacking several background extensions on one screen costs performance and muddies the effect. Pick the one image that defines the screen.

Contacts-Style Alphabet Index

2026-09-29T00:01:00-04:00

For years, the one thing that sent SwiftUI developers back to UITableView was the little column of letters down the right edge of Contacts. Tap “M” and you land on the Ms. SwiftUI never had it, so a long alphabetical list meant a lot of scrolling or a UIKit bridge. In iOS 26 it is a single modifier on each section.

This recipe builds a contacts list with the index, handles names that start with accents or digits, and hides the index while searching.

Method

1. Group the data into sections

The index points at sections, so start by grouping rows under the letter they belong to. Folding diacritics means “Élodie” files under E rather than getting a section of her own, and anything that doesn’t start with a letter goes under “#”, just as it does in Contacts.

struct Contact: Identifiable {
    let id = UUID()
    let name: String
}

struct ContactSection: Identifiable {
    let letter: String
    let contacts: [Contact]
    var id: String { letter }
}

extension Array where Element == Contact {
    func sectioned() -> [ContactSection] {
        let groups = Dictionary(grouping: self) { contact -> String in
            let first = contact.name.prefix(1)
                .folding(options: [.diacriticInsensitive, .caseInsensitive], locale: .current)
                .uppercased()
            return first.first?.isLetter == true ? first : "#"
        }
        return groups.keys
            .sorted { lhs, rhs in
                if lhs == "#" { return false }
                if rhs == "#" { return true }
                return lhs < rhs
            }
            .map { letter in
                ContactSection(
                    letter: letter,
                    contacts: groups[letter]!.sorted {
                        $0.name.localizedStandardCompare($1.name) == .orderedAscending
                    }
                )
            }
    }
}

2. Label each section

Now the new part. .sectionIndexLabel(_:) goes on the Section itself, and tells the list what to show for it in the index. The label is typically one character long.

struct ContactsView: View {
    let contacts: [Contact]
    @State private var query = ""

    private var sections: [ContactSection] {
        let visible = query.isEmpty
            ? contacts
            : contacts.filter { $0.name.localizedStandardContains(query) }
        return visible.sectioned()
    }

    var body: some View {
        NavigationStack {
            List {
                ForEach(sections) { section in
                    Section(section.letter) {
                        ForEach(section.contacts) { contact in
                            Text(contact.name)
                        }
                    }
                    .sectionIndexLabel(Text(section.letter))
                }
            }
            .listStyle(.plain)
            .listSectionIndexVisibility(query.isEmpty ? .visible : .hidden)
            .navigationTitle("Contacts")
            .searchable(text: $query)
        }
    }
}

The index is visible by default as soon as any section has a label, so .listSectionIndexVisibility is optional. Here it hides the index while the reader is searching, when the results are short and the letters would only get in the way.

3. Keep a full A–Z, even for empty letters

With only a few dozen contacts, the index shows only the letters you have, which makes it jump around in height as data changes. Apple’s documentation describes the fix: give empty sections an index label but no header, and the index keeps its full shape without drawing empty headings in the list.

struct AlphabetIndexFullView: View {
    let contacts: [Contact]
    private let alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ#".map(String.init)

    var body: some View {
        let sections = contacts.sectioned()

        NavigationStack {
            List {
                ForEach(alphabet, id: \.self) { letter in
                    let rows = sections.first { $0.letter == letter }?.contacts ?? []
                    if rows.isEmpty {
                        Section { }
                            .sectionIndexLabel(Text(letter))
                    } else {
                        Section(letter) {
                            ForEach(rows) { Text($0.name) }
                        }
                        .sectionIndexLabel(Text(letter))
                    }
                }
            }
            .listStyle(.plain)
            .navigationTitle("Contacts")
        }
    }
}

Plating

Load a few hundred names and the letters appear, stacked vertically, down the trailing edge of the list. Tap a letter and the list jumps straight to that section. Start typing in the search field and the index steps aside until the query is cleared.

Index

Full A–Z

iPad

FIG. 1 — The built-in section index, and the full A–Z variation where letters without contacts still appear.

Kitchen notes

Lists only. The index is a feature of List. A ScrollView with a LazyVStack won’t show it; use ScrollViewReader and your own buttons there.
Leave letters out on purpose. Only sections with a sectionIndexLabel appear in the index, so a “Favourites” section pinned at the top can stay out of the alphabet simply by not having a label.
Collation isn’t universal. Grouping by first letter suits Latin-script names. For Japanese, Chinese, or mixed-script contacts, group by a locale-appropriate key (reading, pinyin initial) and use that as the label instead.
Stable identity. ContactSection uses its letter as its id, so sections keep their identity as data changes and SwiftUI animates insertions instead of rebuilding the list.

@Observable Cuts SwiftUI Redraws in Half

2026-09-28T00:00:00-04:00

In a settings screen with forty rows, every keystroke in a single text field was re-rendering the entire list. The culprit was a view model built on ObservableObject, where any change to any @Published property tells every observing view to recompute its body. Switching to the Observation framework’s @Observable macro dropped body evaluations on that screen by more than half.

The difference is granularity. ObservableObject publishes a single objectWillChange signal for the whole object, so SwiftUI can’t tell which property moved. With @Observable, SwiftUI records the specific properties a view’s body actually reads, and only invalidates that view when one of those changes. A row that only shows username no longer cares that bio was edited.

The migration

The mechanical change is small. Drop the protocol conformance and the @Published wrappers, add the macro, and swap the property wrappers at the call site:

import Observation

@Observable
final class ProfileModel {
    var username = ""
    var bio = ""
    var isSaving = false

    @ObservationIgnored
    var analyticsToken: String? // never triggers a redraw
}

struct ProfileScreen: View {
    @State private var model = ProfileModel()

    var body: some View {
        Form {
            UsernameRow(model: model)
            BioEditor(model: model)
        }
    }
}

Owned models move from @StateObject to @State. Models passed down need no wrapper at all — a plain let or var is enough, because tracking happens on access, not on declaration. When a child needs a binding, use @Bindable locally.

Three gotchas

Initialisation cost. @State may call your initialiser more than once as the view struct is recreated, though only the first instance is kept. Keep init cheap and move network work into .task.

Computed properties still track. A computed property that reads username makes the view depend on username. That’s usually what you want, but it can surprise you when a “cheap” computed value touches half the model.

Deployment target. Observation requires iOS 17. If you still support iOS 16, keep ObservableObject for now — the two can coexist in the same project while you migrate screen by screen.

Measure before and after with Self._printChanges() inside body or the SwiftUI template in Instruments. On our settings screen the numbers spoke for themselves.

Surviving Swift 6's Sendable Warnings

2026-09-24T00:00:00-04:00

Turning on the Swift 6 language mode in a mid-sized app produced just over three hundred concurrency diagnostics. Most were variations on a handful of themes, and fixing them in the right order made the rest collapse quickly.

The key idea is that Swift 6 wants proof that data crossing an isolation boundary is safe. A type is safe to share if it is Sendable: value types made of sendable parts, actors, and classes that are immutable or protected by the compiler-visible isolation of an actor.

1. Pin the UI layer to the main actor

Most warnings in an app target come from view models and controllers touched from both the UI and async work. Annotating them with @MainActor resolves the majority in one stroke, because everything inside now shares one isolation domain:

@MainActor
final class FeedViewModel {
    private(set) var items: [Item] = []
    private let api: FeedAPI

    init(api: FeedAPI) { self.api = api }

    func refresh() async throws {
        // Hops off the main actor inside `fetch`, back on for the assignment.
        items = try await api.fetch()
    }
}

2. Make models value types

Plain data models that are structs of strings, numbers and dates are inferred Sendable automatically when they’re not public. For public types, add the conformance explicitly. If a model is a class only out of habit, make it a struct.

3. Wrap shared mutable state in an actor

Caches and in-memory stores that are touched from many tasks belong in an actor. Callers await their way in, and the compiler stops worrying.

4. Use `@unchecked Sendable` last, and document it

Some types are thread-safe through a lock the compiler can’t see. Marking them @unchecked Sendable is legitimate, but leave a comment explaining the invariant. Every one of these is a promise the compiler is no longer checking for you.

Migrate module by module with the per-target Swift language version setting, and keep the warnings as warnings until a target is clean.

NavigationStack Deep Links in Forty Lines

2026-09-19T00:00:00-04:00

Deep linking used to mean threading flags through half the view hierarchy. With NavigationStack bound to a path, navigation becomes plain data: an array of routes. Parse a URL into that array and the stack rebuilds itself to match.

Start with an enum of every destination the app can push. Making it Hashable is all NavigationStack needs:

enum Route: Hashable {
    case recipe(id: Int)
    case author(name: String)
    case settings
}

@Observable final class Router {
    var path: [Route] = []

    func open(_ url: URL) {
        guard url.scheme == "iosbuffet" else { return }
        let parts = url.pathComponents.dropFirst() // drop "/"
        switch (url.host, parts.first) {
        case ("recipe", let id?):
            if let id = Int(id) { path = [.recipe(id: id)] }
        case ("author", let name?):
            path = [.author(name: name)]
        case ("settings", _):
            path = [.settings]
        default:
            break
        }
    }
}

struct RootView: View {
    @State private var router = Router()

    var body: some View {
        NavigationStack(path: $router.path) {
            HomeView()
                .navigationDestination(for: Route.self) { route in
                    switch route {
                    case .recipe(let id): RecipeView(id: id)
                    case .author(let name): AuthorView(name: name)
                    case .settings: SettingsView()
                    }
                }
        }
        .onOpenURL { router.open($0) }
        .environment(router)
    }
}

Replacing path wholesale means a link always lands in a predictable place, regardless of where the user was. If you’d rather push on top of the current stack, append instead.

Why this scales

Because the path is just an array, it’s trivially testable — feed open(_:) a URL and assert on path without rendering a single view. It’s also Codable if your routes are, which gives you state restoration almost for free.

Universal links follow the same route: handle NSUserActivity with .onContinueUserActivity(NSUserActivityTypeBrowsingWeb) and pass its webpageURL through the same parser.

Instruments Finds the Leak Your Closures Hid

2026-09-14T00:00:00-04:00

The first symptom was a notification observer firing twice, then three times, then once more for every visit to a detail screen. The screen was being dismissed but never deallocated, and each zombie copy was still listening.

The fastest way to confirm a suspected leak is the Memory Graph Debugger. Run the app, visit the screen a few times, go back, and press the three-circle button in Xcode’s debug bar. Leaked instances show up in the navigator with a purple warning, and filtering by your class name shows exactly how many copies are alive.

Reading the graph

Selecting one of the zombie controllers showed the cycle: the controller owned a view model, the view model stored a completion closure, and that closure captured self — the controller — strongly.

final class RecipeDetailViewController: UIViewController {
    private let model = RecipeDetailModel()

    override func viewDidLoad() {
        super.viewDidLoad()

        // Leaks: model -> closure -> self -> model
        model.onUpdate = { recipe in
            self.render(recipe)
        }

        // Fixed: the closure no longer keeps the controller alive
        model.onUpdate = { [weak self] recipe in
            self?.render(recipe)
        }
    }
}

Catching it next time

Instruments’ Leaks template will flag many cycles automatically, but the cheapest guard is a line in deinit during development — print("deinit \(Self.self)") — so a missing message is noticed immediately.

Two rules cover most cases. Closures that are stored by something you own need [weak self]. Closures that run once and are released, like UIView.animate blocks, don’t. When in doubt, check the graph.

Diffable Data Sources Are UIKit's Best-Kept Secret

2026-09-08T00:00:00-04:00

The most common UIKit crash we saw in production was the old classic: the number of rows after an update didn’t match the number before plus the inserted minus the deleted. Diffable data sources make that crash impossible by design, because you never describe changes at all — only the state you want.

You build an NSDiffableDataSourceSnapshot of sections and item identifiers, apply it, and the data source computes the inserts, deletes and moves itself:

enum Section { case main }

final class RecipesViewController: UICollectionViewController {
    private var dataSource: UICollectionViewDiffableDataSource<Section, Recipe.ID>!
    private var recipes: [Recipe.ID: Recipe] = [:]

    private func configureDataSource() {
        let cell = UICollectionView.CellRegistration<UICollectionViewListCell, Recipe.ID> {
            [unowned self] cell, _, id in
            var content = cell.defaultContentConfiguration()
            content.text = recipes[id]?.title
            cell.contentConfiguration = content
        }
        dataSource = .init(collectionView: collectionView) { view, indexPath, id in
            view.dequeueConfiguredReusableCell(using: cell, for: indexPath, item: id)
        }
    }

    func show(_ new: [Recipe]) {
        recipes = Dictionary(uniqueKeysWithValues: new.map { ($0.id, $0) })
        var snapshot = NSDiffableDataSourceSnapshot<Section, Recipe.ID>()
        snapshot.appendSections([.main])
        snapshot.appendItems(new.map(\.id))
        dataSource.apply(snapshot, animatingDifferences: true)
    }
}

Identifiers, not models

Notice the item type is Recipe.ID, not Recipe. If you use the whole model as the identifier, editing a title changes its hash and the diff sees a delete plus an insert rather than an update. Store identifiers in the snapshot, look models up in the cell provider, and when content changes in place call reconfigureItems(_:) on the snapshot.

Pair this with compositional layout and list configurations and most table-view boilerplate simply disappears.

Keep Secrets Out of Info.plist With xcconfig

2026-09-02T00:00:00-04:00

Hard-coding a base URL or API key in Swift source means it ends up in version control and forces an edit every time you switch environments. Build configuration files — .xcconfig — fix both problems with nothing but Xcode’s built-in settings system.

An xcconfig file is a plain list of build settings. Create one per environment, assign each to its build configuration under the project’s Info tab, and keep secrets in a separate file that git ignores:

// Config/Shared.xcconfig
API_HOST = api.iosbuffet.com
#include? "Secrets.xcconfig"

// Config/Secrets.xcconfig  (in .gitignore)
API_KEY = sk_live_do_not_commit

The #include? form is optional-include: if a teammate hasn’t created their secrets file yet, the build still succeeds. Note that // begins a comment in xcconfig files, so a full URL can’t be written directly — store the host and add the scheme in code.

Reading values at runtime

Build settings aren’t visible to your app by default. Expose the ones you need by adding keys to Info.plist whose values reference the setting, such as APIHost set to $(API_HOST). Then read them once at launch:

enum Config {
    static let apiHost: String = value(for: "APIHost")
    static let apiKey: String = value(for: "APIKey")

    private static func value(for key: String) -> String {
        guard let value = Bundle.main.object(forInfoDictionaryKey: key) as? String,
              !value.isEmpty else {
            fatalError("Missing \(key) — check your xcconfig files")
        }
        return value
    }
}

A word on secrecy

This keeps keys out of your repository, not out of your binary. Anything shipped inside an app can be extracted by a determined user. Truly sensitive credentials belong on a server you control, with the app holding only a short-lived token.

The Daily Recipe — iOS Buffet

An In-App Browser, No UIKit Required

Method

1. Import WebKit and describe a summary

2. Put the page on screen

3. Walk the history

4. Run JavaScript on the page

5. Show the summary

Plating

Kitchen notes

3D Charts: A Surface You Can Spin

Method

1. Set out the data

2. Plot a surface

3. Scatter points in 3D

4. Serve both on one screen

Plating

Kitchen notes

Custom Animated Shapes with @Animatable

Method

1. Draw the wave

2. The old way, for comparison

3. The new way

4. Make it slosh and ripple

5. Put it on a screen

Plating

Kitchen notes

Rich Text Notes Editor

Method

1. Start with some formatted text

2. Bind the editor to text and selection

3. Read the formatting under the cursor

4. Decide which formatting is allowed

Plating

Kitchen notes

Morphing Glass Buttons

Method

1. Name the actions

2. Build the cluster

3. Fuse two controls into one pill

4. Use the stock styles for ordinary buttons

5. Plate it over a photo

Plating

Kitchen notes

Liquid Glass Tab Bar with a Now-Playing Tray

Method

1. Model the tabs as values

2. Build the shell

3. Make the tray respond to its placement

4. Give each tab something to scroll

Plating

Kitchen notes

Edge-to-Edge Hero Header

Method

1. Start with a split view

2. Pull the hero under the bars

3. Soften the edge

4. Group the toolbar the iOS 26 way

Plating

Kitchen notes

Contacts-Style Alphabet Index

Method

1. Group the data into sections

2. Label each section

3. Keep a full A–Z, even for empty letters

Plating

Kitchen notes

@Observable Cuts SwiftUI Redraws in Half

The migration

Three gotchas

Surviving Swift 6's Sendable Warnings

1. Pin the UI layer to the main actor

2. Make models value types

3. Wrap shared mutable state in an actor

4. Use @unchecked Sendable last, and document it

NavigationStack Deep Links in Forty Lines

Why this scales

Instruments Finds the Leak Your Closures Hid

Reading the graph

Catching it next time

4. Use `@unchecked Sendable` last, and document it