Panda is an asynchronous render and layout framework which can be used to achieve high performance tableview.





GitHub Stars



Last Commit

1yr ago











Carthage compatible Version Swift 4.0

What is Panda

Panda is an asynchronous render and layout framework which can be used to achieve high performance tableview.

Panda is combined by 3 different component:

  1. Cassowary. Core algorithm for constraint solving
  2. Layoutable. API for 'AutoLayout'
  3. Panda. Asynchronous display node.

Why use Panda

When it comes to asynchronous render,many developr will think about Texture or AsyncDisplayKit, In facet, Panda learned a lot from Texture, Panda's render process can be seen as a simplfy version of Texture. But Panda does have it's advantages.Panda use AutoLayout for frame caculating which makes it easy to learn compared to Texture's Flexbox for iOS developer.Panda is more lightweighted and it's usage is more close to system's API,it just cost little to integration. So,if you love Swift,love AutoLayout ,want a high fps tableview and do't want to cost too much,Panda is for you.


  • Asynchronously render view
  • AutoLayout similar API with background thread usage ability
  • Comparable with existing UIView subclass
  • High performance
  • Pure Swift implement


visit PandaDemo for a full demonstration


  • iOS 8.0+
  • Swift 4.2
  • Xcode 10.0



CocoaPods is a dependency manager for Cocoa projects. Install it with the following command:

$ gem install cocoapods

To integrate Panda into your Xcode project using CocoaPods, specify it to a target in your Podfile:

source ''
platform :ios, '8.0'

target 'MyApp' do
  # your other pod
  # ...
  pod 'PandaKit'

Then, run the following command:

$ pod install

open the {Project}.xcworkspace instead of the {Project}.xcodeproj after you installed anything from CocoaPods.

For more information about how to use CocoaPods, see this tutorial.


Carthage is a decentralized dependency manager for Cocoa application. To install the carthage tool, you can use Homebrew.

$ brew update
$ brew install carthage

To integrate Panda into your Xcode project using Carthage, specify it in your Cartfile:

github "" "master"

Then, run the following command to build the Panda framework:

$ carthage update

At last, you need to set up your Xcode project manually to add the Panda,Layoutable and Cassowary framework.

On your application targets’ “General” settings tab, in the “Linked Frameworks and Libraries” section, drag and drop each framework you want to use from the Carthage/Build folder on disk.

On your application targets’ “Build Phases” settings tab, click the “+” icon and choose “New Run Script Phase”. Create a Run Script with the following content:

/usr/local/bin/carthage copy-frameworks

and add the paths to the frameworks you want to use under “Input Files”:


For more information about how to use Carthage, please see its project page.


  1. Basic

    import both Panda and Layoutable,than just write like UIKit

    import Panda
    import Layoutable
    // initiallize 
    let node = ViewNode()
    let textNode = TextNode()
    // addSubnode
    // update properties
    textNode.text = "test"
    node.backgroundColor = .red

// Layout node.size = (100,100) = node


##### UIKit compare

Panda                        |  UIKit                     
-------------------------    |  --------------------
ViewNode                     |  UIView                    
ImageNode                    |  UIImageView              
TextNode                     |  UILabel                   
ControlNode                  |  UIControl
ButtonNode                   |  UIButton
StackNode                    |  UIStackView
FlowLayout                   |  No

There do have some difference to make Panda easy to use.For example ControlNode provides a `hitTestSlop` to expand hittest area.ButtonNode provides `space`,`layuotAxis`,`textFirst` to make it easy to control layout of Button Image and Text

2. *Background thread usage*

if code if running in main thread ,frame and appearance for node  will update automaticlly.But if you want to layout from background and cache frame,  call `layoutIfNeeded()` ,then `var layoutValues: LayoutValues` will be what you want if your node hierarchy is not changed,then just pass it as a parameter to `apply(_ layout: LayoutValues)` in main thread.

3. *Integrate existing UIView subclass*

use `LayoutNode` as a placeHolder,you can use your own UIView and take advantage of node layout

  // XXVideoView will be initialized in main thread when first visit
  let videoNode = LayoutNode<XXVideoView> {
    let view = XXVideoView()
    return view
  let node2 = ViewNode()
  node.left == node2.left
  1. Layout

    visit Layoutable for more about Layout API


  1. The most import thing about performance is TextRender Cache .We need to control TextRender Cache manually now .TextRender provide a default TextRenderCache to cache values. If you enter a tempoory ViewController, call TextRender.activeCache() to create a new cache, and call TextRender.cleanCache(_ identifier) wnen exit from the ViewController or all the cache is not needed.
  2. if allowed,set fixedWidth = true for TextNode .fixedWidth means TextNode's width is not determined by text Size, for example you have constraints like textNode.width = 100, or textNode.xSide = superNode.xSide and superNode's width is determined.This will avoid an extra creation of TextRender and avoid a text layout pass which has a big impact on performance.


  1. Find a better way to control TextRender cache
  2. Complete StackLayout

Rate & Review

Great Documentation0
Easy to Use0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Unwelcoming Community0