Interface Builder & SwiftUI Previews

Xcode: The IDE Itself

Chapter 3 · Interface Builder & SwiftUI Previews

Android Studio has one tool for designing a screen, the Layout Editor. Xcode has two that live in the same window and solve different problems: Interface Builder, the older visual tool, and the SwiftUI preview canvas. This chapter covers what each one is, how they differ, and how to tell which one you are working with. The history of Interface Builder is well documented. The details of the preview canvas come from a handful of tutorial sites and Apple's WWDC 2023 session listing, so they are marked where I could not check them against Apple's own pages.

Interface Builder: The Older Tool

Interface Builder began as "SOS Interface," created by Jean-Marie Hullot at Inria near Paris. It was distributed for the Macintosh in the United States in 1986, presented at MacWorld Expo in January 1987, and by 1988 it was part of NeXTSTEP 0.8. It saved interfaces as .nib files, short for NeXT Interface Builder, or as XML-based .xib files. The .xib format was added as version 3 because it is more suitable for storage in revision control systems.

For most of its life Interface Builder was a separate application. As of Xcode 4, Apple integrated its functionality directly into Xcode. The last standalone releases listed are 3.2.6 (15 March 2011) and 4.0 (9 March 2011). That answers a question left open in Chapter 1: Interface Builder joined Xcode in Xcode 4.

Storyboards

Xcode projects for UIKit apps commonly use storyboard files, which are Interface Builder's newer format. I did not fetch a source for when storyboards were introduced or how they differ in detail from .xib files, so this chapter does not describe them further. The iOS Development courses on this site use SwiftUI throughout, so Interface Builder is background here, not a working tool you need to master.

The SwiftUI Preview Canvas

SwiftUI is code-first: you write the view in Swift, and the canvas shows it beside the code. Since Xcode 15 and Swift 5.9 you create a preview with the #Preview macro, which replaces the older PreviewProvider protocol that required defining previews inside a static computed property. The two forms look like this.

import SwiftUI

struct GreetingView: View {
    var body: some View {
        Text("Hello")
    }
}

// Xcode 15 and later: the #Preview macro
#Preview {
    GreetingView()
}

// Older form: a PreviewProvider
struct GreetingView_Previews: PreviewProvider {
    static var previews: some View {
        GreetingView()
    }
}

The tutorial sites I read agree on the following, but I did not confirm them against Apple's own documentation: with the macro you don't need a separate provider struct, and the view appears when you open the canvas; unlike PreviewProvider, the macro also lets you preview UIKit and AppKit views; the device is chosen in the canvas itself, where a device icon at the bottom changes the run destination, replacing the old .previewDevice modifier; and previews can show light and dark modes and accessibility settings.

Shortcut	What it does
Option + Command + Return	Show or hide the canvas
Option + Command + P	Rebuild the preview

Interactive Previews

The canvas can run a preview live, with play and pause controls, so you can tap and scroll the view inside Xcode. I did not verify how this differs between Xcode versions, so treat the controls as they appear in your own version. iOS Development Fundamentals 5 introduced views and modifiers, which are what you preview here.

Two Different Tools

Question	Interface Builder	SwiftUI canvas
How you design	Drag and drop into a visual editor	Write Swift code and watch the result
What is saved	A `.xib` or storyboard file	Your Swift source; the canvas is a view of it
Origin	NeXT, 1980s; part of Xcode since Xcode 4	Tied to SwiftUI; the `#Preview` macro arrived in Xcode 15
In version control	The XML `.xib` format was added to suit it	Ordinary source files

Which One Am I Looking At?

If you are editing a file that contains Swift code and a canvas, you are using SwiftUI previews. If you are dragging elements into a visual layout stored in a .xib or storyboard, you are using Interface Builder. Advice from older tutorials often assumes the second. When a step says "Interface Builder" and your project is SwiftUI, it probably does not apply.

Hands-On Exercises

Exercise 1

Explain in your own words why the .xib format was added to Interface Builder, and say what that tells you about how interface files were being used in teams.

📄 View solution

Exercise 2

Convert the PreviewProvider example above into a #Preview for a view called ProfileCard, and say what you no longer have to write.

📄 View solution

Exercise 3

A tutorial tells you to "open the storyboard and drag a button onto the view controller." Using this chapter, explain how you would decide whether that step applies to a SwiftUI project, and name two claims in this chapter you could not verify.

📄 View solution

Chapter 3 Quick Reference

Interface Builder: from NeXT (in NeXTSTEP 0.8 by 1988); .nib then .xib files; integrated into Xcode as of Xcode 4
#Preview: Xcode 15 and Swift 5.9; replaces PreviewProvider
Canvas: Option + Command + Return shows or hides it; Option + Command + P rebuilds
Two tools: drag-and-drop layout files versus code you write with a live canvas
Unverified: storyboard details, the canvas features against Apple's own pages, and interactive-preview behavior across versions