Live Rendering iOS Tutorial

in Xcode it is possible to change code at runtime and see the changes rendered live in the storyboard using IBDesignable. It is also possible to change user attributes live into the Interface Builder using IBInspectable. In this tutorial we will draw a square with a border. The width and color will be updated using this attributes. This tutorial is made with Xcode 10 and built for iOS 12.

Open Xcode and create a new Single View App.

For product name, use IOSLiveRenderingTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and choose Next.

Go to the File Menu and select File ->New -> File. Choose iOS->Source->Cocoa Touch Class and name the new class SquareView. Make it a subclass of UIView, and ensure the language is Swift. Click Next and then Create.

Go to the Storyboard and drag a View from the Object Library into the view controller's view. By default the View has a white background color, which makes this view invisible into the view controller's view. Select the view and go to the Attributes inspector. Change the background color to yellow. 

Select the yellow view and Go to the Size Inspector. Enter the following values.

The Storyboard now should look like this.

Next, set up the Auto Layout constraints.

Ctrl and drag from inside the yellow view and move the pointer slightly while staying inside the view. Hold the ctrl key and select "Width" and "Height".


Ctrl and drag from inside the yellow view and move the pointer down outside the yellow view. Hold the ctrl key and select "Leading Space to Container Margin" and "Top Space to Top Layout Guide".

Select the yellow View and go to the Identity inspector. In the Custom Class section change the class to SquareView.

Go to the SquareView.swift file and change the drawRect method

override func draw(_ rect: CGRect) {
    if let context = UIGraphicsGetCurrentContext() {

        // Set the outerline width

        // Set the outerline colour

        // Create square

        // Draw

The outerline width of the square is set to 20 and the color is set to blue. This square is drawn over the yellow square from the storyboard. Build and Run the project to view the square.

Now imagine the outerline width needs to be changed to maybe 10 or 15, whatever looks best. It will be rather cumbersome to build and run the project each time to view the changes. It is possible to make a custom view render live using the @IBDesignable keyword. Add the following line before the SquareView class declaration.


Open the Assistant Editor and Manually Open the Storyboard view next to the already opened SquareView.swift file. Now change the outerline width to 10

CGContextSetLineWidth(context, 10.0)

The square's outerline width changes from 20 to 10 in the storyboard.

Properties marked with IBInspectable are editable in the Interface Builder's inspector panel. Add the following IBInspectable property in the SquareView class.

 @IBInspectable var borderColor: UIColor = {
    didSet {
        layer.borderColor = borderColor.cgColor

The property observer will update the borderColor of the underlying layer of the SquareView. Also, change the setting of the outerline blue color to


Now go to the storyboard and select the Square View. Go to the Attributes Inspector and the Border Color is now editable. Change the color to red, the outerlne color of the square changes to red in the storyboard.


You can download the source code of the IOSLiveRenderingTutorial at the ioscreator repository on Github.