If you’ve been working with SwiftUI, you’re probably used to the live previews that allow you to see UI changes in real time. But for UIKit developers, the struggle has been real!

In Xcode 15 and iOS 17, Apple finally introduced UIKit Previews, making it possible to preview UIKit views without running the app on a simulator or device. This is a game changer for UIKit-based projects!

How to Use UIKit Previews in Xcode

UIKit previews work similarly to SwiftUI previews. You can wrap an UIView or UIViewController inside the #Preview macro.

Basic Example: Previewing a UILabel

Here’s a simple way to preview an UILabel:

import UIKit

class ViewController: UIViewController {

    func makeLabel() -> UILabel {
        let label = UILabel(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
        label.backgroundColor = .red
        label.text = "Hello, World!"
        label.textAlignment = .center
        return label
    }
}

@available(iOS 17, *)
#Preview {
    ViewController().makeLabel()
}

What’s happening here?

• makeLabel() creates a simple UILabel with a red background.

• #Preview { ViewController().makeLabel() } renders it directly in the Xcode canvas, just like SwiftUI previews.

• No need to run the app - you can see the label instantly!

Previewing a Custom UIView

Most of the time, we’re not just dealing with simple labels. Let’s wrap a custom UIView inside a preview:

import UIKit

class CustomView: UIView {
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupUI()
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    private func setupUI() {
        backgroundColor = .blue

        let label = UILabel()
        label.text = "UIKit Previews! 🚀"
        label.textColor = .white
        label.textAlignment = .center
        label.translatesAutoresizingMaskIntoConstraints = false

        addSubview(label)

        NSLayoutConstraint.activate([
            label.centerXAnchor.constraint(equalTo: centerXAnchor),
            label.centerYAnchor.constraint(equalTo: centerYAnchor)
        ])
    }
}

@available(iOS 17, *)
#Preview {
    CustomView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
}

Previewing a UIViewController

You can also preview a UIViewController using #Preview:

import UIKit

class MyViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .systemGreen
    }
}

@available(iOS 17, *)
#Preview {
    MyViewController()
}

Summary

UIKit Previews introduced in Xcode 15 are a huge step forward for UIKit development. Here’s why you should start using them:

• No more waiting for the simulator to launch.
• Real-time preview of UIKit views and view controllers.
• Faster iteration and development.

If you’re still maintaining a UIKit project, this feature will save you so much time!

You can examine the code in the Github repo.