Need help with popo?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

131 Stars 22 Forks 43 Commits 0 Opened issues


PoPo is the grid layout tool, the best choice for runtime layout.

Services available


Need anything else?

Contributors list

# 324,935
43 commits


PoPo is the grid layout tool, the best choice for runtime layout.


PoPo is a two dimensional grid layout library, The rows and columns of the grid system are custom defined at runtime, no CSS dependence, supports any size screen, It is especially suitable for large screen and super large screen.PoPo adopts the double layout pattern of grid and panel, it encapsulates content independent layout code, You can quickly build any complex pages without writing any HTML or CSS code.


  • Custom grid system, no CSS dependence, no third party library dependency, no need to write HTML, CSS code
  • Grid system uniform and free layout && Universal panel layout && User defined layout patterns, Let layout be arbitrary.
  • Scaling, positioning, auxiliary information, grid auxiliary line, sub screen (coordinate) auxiliary line, panel auxiliary line debugging function, so that the big screen application development debugging no longer bother
  • Rapid construction of visualization applications
  • Adaptive multi screen
  • Rich configuration, debugging options and API
  • Compatible IE9+



More Examples...


  1. node.js
// npm
npm install popojs  --save

// yarn yarn add popojs

  1. browser


  1. node.js
var P = require('popojs');

// or

import * as P from 'popojs';

// Initialize PoPo Instance var popoInstance = P.init({ rows: 12, cols: 24 });


// Render to container popoInstance.addTo('container');

  1. browser
// body

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.