WebKit Integration for SwiftUI

Embed and control web content in SwiftUI apps using the native WebView struct and WebPage observable class. Covers loading, navigation, JavaScript execution, and view customization.

When This Skill Activates

• User wants to display web content inside a SwiftUI app
• User needs to load URLs, HTML strings, or data blobs in a web view
• User asks about JavaScript interop from SwiftUI
• User needs navigation control (back, forward, reload) for embedded web content
• User wants to customize web view behavior (gestures, text selection, link previews)
• User needs to capture snapshots or export PDFs from web content
• User asks about intercepting navigation requests or custom URL schemes
• User wants to configure private browsing or custom user agents

Decision Tree

What do you need?
|
+-- Display a URL or HTML content
|   +-- Simple, no interaction needed
|   |   +-- WebView(url:) --> see webview-basics.md
|   +-- Need loading state, reload, custom config
|       +-- WebPage + WebView(page) --> see webview-basics.md
|
+-- Navigate programmatically (back, forward, intercept)
|   +-- Back/forward list, navigation events
|   |   +-- see navigation.md
|   +-- Intercept or cancel navigation requests
|       +-- NavigationDeciding protocol --> see navigation.md
|
+-- Execute JavaScript or communicate with web content
|   +-- callJavaScript, arguments, content worlds
|       +-- see javascript-advanced.md
|
+-- Capture snapshots, export PDF, web archive
|   +-- page.snapshot(), page.pdf(), page.webArchiveData()
|       +-- see javascript-advanced.md
|
+-- Handle custom URL schemes
    +-- URLSchemeHandler protocol --> see javascript-advanced.md

API Availability

Quick Start

Simplest Usage

import SwiftUI
import WebKit

struct BrowserView: View {
    var body: some View {
        WebView(url: URL(string: "https://developer.apple.com")!)
    }
}

With WebPage for Full Control

import SwiftUI
import WebKit

struct ControlledBrowserView: View {
    @State private var page = WebPage()

    var body: some View {
        WebView(page)
            .onAppear {
                page.load(URLRequest(url: URL(string: "https://developer.apple.com")!))
            }
    }
}

Top Mistakes

Review Checklist

• Using WebPage when any control beyond simple display is needed
• Both SwiftUI and WebKit are imported
• Navigation events observed for loading indicators and error handling
• JavaScript execution waits for page to finish loading
• Private browsing uses .nonPersistent() data store
• Navigation interception returns correct values (preferences to allow, nil to cancel)
• JavaScript arguments passed via arguments: parameter, not string interpolation
• Custom URL scheme handler registered on configuration before page loads
• Find-in-page enabled with findNavigator(isPresented:) if needed
• Appropriate gesture and interaction modifiers applied (back/forward, magnification, text selection)
• Content background customized if needed for visual integration

Reference Files

Cross-References

• For macOS window management around web views, see macos/architecture-patterns/
• For navigation architecture that hosts a web view, see ios/navigation-patterns/
• For Liquid Glass design around web content, see design/liquid-glass/

References

• WebView (SwiftUI)
• WebPage
• WKContentWorld
• WKSnapshotConfiguration