WKWebView in Interface Builder

WKWebView

Interface Builder

iOS Development

Swift

Xcode

WKWebView in Interface Builder

Master System Design with Codemia

Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises.

Start Practicing Learn More

Introduction

WKWebView works well with storyboards and XIB files when your main goal is visual layout and Auto Layout constraints. The important part is making sure the Interface Builder view is actually backed by WKWebView at runtime, and then doing content loading and delegate setup in code.

Add the Web View in Interface Builder

You can either drag a WebKit view directly from the object library if available, or place a regular UIView and set its custom class to WKWebView in the Identity Inspector.

After placing the view:

add the layout constraints you want
connect an outlet to the view controller
import WebKit in Swift code

A basic controller looks like this:

swift

1import UIKit
2import WebKit
3
4final class ViewController: UIViewController {
5    @IBOutlet private weak var webView: WKWebView!
6
7    override func viewDidLoad() {
8        super.viewDidLoad()
9
10        if let url = URL(string: "https://example.com") {
11            let request = URLRequest(url: url)
12            webView.load(request)
13        }
14    }
15}

Once the outlet is connected properly, Interface Builder handles layout and your code handles what the web view displays.

Most real screens need more than a simple load call. WKNavigationDelegate gives you page-load events and the ability to react to navigation.

swift

1import UIKit
2import WebKit
3
4final class ViewController: UIViewController, WKNavigationDelegate {
5    @IBOutlet private weak var webView: WKWebView!
6
7    override func viewDidLoad() {
8        super.viewDidLoad()
9        webView.navigationDelegate = self
10
11        let html = "<html><body><h1>Hello</h1></body></html>"
12        webView.loadHTMLString(html, baseURL: nil)
13    }
14
15    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
16        print("Page loaded")
17    }
18}

This works whether the web view was created in Interface Builder or entirely in code.

Know When Interface Builder Stops Being Enough

Interface Builder is excellent for:

view hierarchy
constraints
sizing
quick outlet wiring

It is less ideal when you need advanced WKWebViewConfiguration, such as:

custom user scripts
message handlers
nondefault website data behavior
custom content controllers created before initialization

Those features usually require constructing the web view in code, because WKWebViewConfiguration must be supplied when the web view is created. A storyboard-instantiated web view already exists by the time your controller outlet is connected.

A Good Rule of Thumb

Use Interface Builder when layout is the main concern and the web view configuration is straightforward. Use a code-first setup when configuration is the main concern.

That means:

storyboard or XIB for simple embedded browser screens
programmatic creation for heavily customized web-view behavior

The decision is not about whether WKWebView works in Interface Builder. It does. The real question is how much control you need over initialization.

Verify the Runtime Wiring Early

If the outlet is nil or the storyboard object is still a plain UIView, all of the load and delegate code can look correct while nothing actually happens. A quick sanity check in viewDidLoad() such as printing the outlet type or setting a temporary background color can save time before you start debugging network or navigation behavior.

Common Pitfalls

Forgetting to import WebKit, which prevents the outlet type from compiling.
Leaving the storyboard view as plain UIView instead of setting the custom class to WKWebView.
Connecting the outlet incorrectly and then debugging load code that never touches the real web view.
Trying to retrofit advanced WKWebViewConfiguration after the storyboard-created web view already exists.
Following outdated UIWebView tutorials instead of WKWebView examples.

Summary

'WKWebView works well in Interface Builder for layout and constraints.'
Connect it as an outlet and load requests or HTML from code.
Add navigation delegates in code when you need page events or navigation control.
Use programmatic creation when advanced configuration must be supplied at initialization time.
Choose between Interface Builder and code-first setup based on whether layout or configuration is the dominant concern.

WKWebView in Interface Builder

Master System Design with Codemia

Introduction

Add the Web View in Interface Builder

Use Delegates for Navigation and Load Events

Know When Interface Builder Stops Being Enough

A Good Rule of Thumb

Verify the Runtime Wiring Early

Common Pitfalls

Summary