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

About the developer

200 Stars 17 Forks 73 Commits 8 Opened issues


A jQuery plugin to ease the development of dynamic html wireframes with state.

Services available


Need anything else?

Contributors list

# 196,761
65 commits
# 33,940
7 commits


Polypage was designed to ease the process of showing multiple page states in html mock-ups. By simply adding class names to a document you can imply state and conditional view logic.


Initialise PolyPage...

$(document).ready(function() {

Use stateful class names in your html...

  • pp_admin
  • pp_not_logged_in
  • pp_logged_in_or_admin
  • pp_logged_in_and_admin
  • pp_not_logged_in_and_not_admin
  • Use special href attributes to trigger state changes if required...

    Log In Toggle
    Log In
    Log Out

    Use special form actions to trigger state changes if required...



    PolyPage makes extensive use of custom events and triggering/binding to these is the recommended way of interacting with page states programatically. Here are some examples (which assume you have bound polypage to the 'body')...

    Toggle the logged in state...

    $('body').trigger('pp_toggleState', 'logged_in');

    Set the logged in state...

    $('body').trigger('pp_setState', { logged_in:true });

    Set the logged in state...

    $('body').trigger('pp_setState', { logged_in:true });

    Listen for state changes...

    $('body').bind('pp_stateChange', function(e, state) { 
      alert("state "+ + " changed to " + state.value); 

    See the specs for some more examples.


    Under the hood PolyPage is logically separated into a core library and several extensions. The currently implemented extensions are...

    • Base: the core event system and bare essentials to get polypage working
    • GUI: the nav bar for pre-built GUI interactions
    • Events: some default event handlers for taking care of polypage formatted click and submit events automagically
    • Cookies: cookie support for maintaining state across pages
    • Keyboard: Keyboard shortcuts for toggling states via "ALT + firstletterofstatename"

    Full documentation for all of the extensions will be coming soon but for now you can see the source code for available options.

    Some usage examples

    Starting PolyPage without cookie support or Event helpers...

    $('body').polypage({ cookie:false, events:false });

    Starting PolyPage with a 2 day cookie expiry a 'ux' prefix and no Event helpers...

    $('body').polypage({ prefix:'ux', cookie:{ expires:2 }, events:false });

    Roll your own PolyPage! if you want to completely customise PolyPage then you can break away from using the polypage() function and initialize the individual components yourself...



    For an example open the index.html file in a web browser.

    If you would prefer be using MooTools instead of jQuery then for the moment you really should checkout cheeaun's fork which contains lots of MooTools goodness.


    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.