From apple-dev
WebKit integration in SwiftUI using WebView and WebPage for embedding web content, navigation, JavaScript interop, and customization. Use when embedding web content in SwiftUI apps.
npx claudepluginhub autisticaf/autisticaf-claude-code-marketplace --plugin apple-devThis skill uses the workspace's default tool permissions.
> **First step:** Tell the user: "swiftui-webkit skill loaded."
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
First step: Tell the user: "swiftui-webkit skill loaded."
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.
What do you need?
|
+-- Display a URL or HTML content
| +-- Simple, no interaction needed
| | +-- WebView(url:) --> see references/webview-basics.md
| +-- Need loading state, reload, custom config
| +-- WebPage + WebView(page) --> see references/webview-basics.md
|
+-- Navigate programmatically (back, forward, intercept)
| +-- Back/forward list, navigation events
| | +-- see references/navigation.md
| +-- Intercept or cancel navigation requests
| +-- NavigationDeciding protocol --> see references/navigation.md
|
+-- Execute JavaScript or communicate with web content
| +-- callJavaScript, arguments, content worlds
| +-- see references/javascript-advanced.md
|
+-- Capture snapshots, export PDF, web archive
| +-- page.snapshot(), page.pdf(), page.webArchiveData()
| +-- see references/javascript-advanced.md
|
+-- Handle custom URL schemes
+-- URLSchemeHandler protocol --> see references/javascript-advanced.md
| API | Minimum OS | Import |
|---|---|---|
WebView | iOS 26 / macOS 26 | SwiftUI + WebKit |
WebPage | iOS 26 / macOS 26 | WebKit |
WebPage.Configuration | iOS 26 / macOS 26 | WebKit |
NavigationDeciding | iOS 26 / macOS 26 | WebKit |
WKContentWorld | iOS 14 / macOS 11 | WebKit |
WKSnapshotConfiguration | iOS 11 / macOS 10.13 | WebKit |
WKPDFConfiguration | iOS 14 / macOS 11 | WebKit |
import SwiftUI
import WebKit
struct BrowserView: View {
var body: some View {
WebView(url: URL(string: "https://developer.apple.com")!)
}
}
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")!))
}
}
}
| Mistake | Problem | Fix |
|---|---|---|
Using WebView(url:) when you need navigation control | No access to back/forward, reload, or events | Use WebPage + WebView(page) |
Forgetting import WebKit alongside import SwiftUI | WebView is in SwiftUI but WebPage requires WebKit | Always import both |
Not observing currentNavigationEvent | Missing loading states, errors go unnoticed | Use onChange(of: page.currentNavigationEvent) |
Calling callJavaScript before page finishes loading | Script fails because DOM is not ready | Wait for .finished navigation event |
| Using persistent data store for private browsing | User data is saved to disk | Use .nonPersistent() on WebsiteDataStore |
Not handling nil return from decidePolicyFor(navigationAction:) | Navigation proceeds when it should be cancelled | Return nil to cancel, return NavigationPreferences to allow |
| Passing JavaScript without argument binding | Vulnerable to injection, hard to debug | Use arguments: parameter for named values |
WebPage when any control beyond simple display is neededSwiftUI and WebKit are imported.nonPersistent() data storearguments: parameter, not string interpolationfindNavigator(isPresented:) if needed| File | Contents |
|---|---|
references/webview-basics.md | WebView creation, WebPage setup, configuration, find-in-page, customization modifiers |
references/navigation.md | Loading content, back/forward list, navigation events, NavigationDeciding protocol |
references/javascript-advanced.md | JavaScript execution, content worlds, snapshots, PDF export, custom URL schemes |
macos-architecture-patterns/ios-navigation-patterns/design-liquid-glass/