How to render the custom UIView in interface builder (StoryBoard or xib) iOS ?

It’s possible to build a custom interface for configuring your custom controls and have them rendered in real-time while designing your project.

Yes, we can design the custom control in interface  builder with help of IBInspectable and IBDesignable.


IBDesignable custom views also debut in Xcode 6. When applied to a UIView or NSView subclass, the @IBDesignable designation lets Interface Builder know that it should render the view directly in the canvas.


IBInspectable properties provide new access to an old feature: user-defined runtime attributes. Currently accessible from the identity inspector, these attributes have been available since before Interface Builder was integrated into Xcode. They provide a powerful mechanism for configuring any key-value coded property of an instance in a NIB, XIB, or storyboard


1) Add a new visual class.

2) Add the attribute IB_DESIGNABLE above the line beginning with @interface.



@interface SFChart : UIView

3) Include the attribute IBInspectable with the declarations of properties that store values.

Example :

@property (nonatomic) IBInspectable NSNumber * lineWidth;

We have some limitation for IBInspectable

You can attach the IBInspectable attribute to any property in a class declaration, class extension, or category for any type that’s supported by the Interface Builder defined runtime attributes:

  • boolean
  • integer or floating point number
  • string
  • localized string
  • rectangle
  • point
  • size
  • color
  • range
  • nil.

 More details refer below links: