The JSQMessagesViewController is a fully featured, open-source messaging UI library for iOS. It provides an easy-to-use interface for displaying and managing messaging conversations, similar to the native Messages app.


  • Customizable UI: Easily change colors, fonts, and other visual properties to match your app’s design.
  • Text and media messages: Send and receive text messages, as well as media messages such as photos and videos.
  • Message bubbles: Display messages in attractive bubble containers with avatars.
  • Input toolbar: Includes a text input field, buttons for media attachments, and a send button.
  • Keyboard management: Automatically adjusts the interface as the keyboard appears and disappears.
  • Typing indicator: Show when the other user(s) are typing.
  • Load earlier messages: Provide a seamless experience by allowing users to load previous messages.
  • Timestamps: Display timestamps for messages to indicate when they were sent.


To install the JSQMessagesViewController library, follow these steps:

  1. Open your Xcode project.
  2. Using CocoaPods:
    • Add the following line to your Podfile: pod 'JSQMessagesViewController'.
    • Run pod install in your project directory.
    • Open the newly created .xcworkspace file.
  3. Manual installation:


Once you have successfully integrated JSQMessagesViewController into your project, follow these steps to use it:

  1. Create a view controller that inherits from JSQMessagesViewController.
  2. In the view controller’s viewDidLoad method, initialize an instance of JSQMessagesBubbleImageFactory to customize message bubble appearance.
  3. Implement the required data source methods to provide data for the UI components.
    • senderId: Return the unique sender identifier for the current user.
    • senderDisplayName: Return the display name for the current user.
    • numberOfSections: Return the number of sections (conversations) in the message view.
    • numberOfItemsInSection: Return the number of items (messages) in each section.
    • messageDataForItemAtIndexPath: Return the message data (text, media) for the specified index path.
  4. Implement the optional delegate methods to handle user interactions and custom actions.
    • didPressSend: Execute an action when the user taps the Send button.
    • didSelectMessage: Perform a custom action when the user taps a message bubble.
  5. Build and run your app.


The official documentation for JSQMessagesViewController can be found on the GitHub repository’s wiki page: https://github.com/jessesquires/JSQMessagesViewController/wiki.


This library is released under the MIT License. Please see the LICENSE file included in the project for full terms and conditions.

Note: This content is a brief representation of the original page.