Skip to main content

A collection of client side patterns for faster and easier web development

Project description

Plone Mockup is an ongoing effort to modernize Plone’s javascript story. Check out examples and documentation at

The Goals of Mockup

  1. Standardize configuration of patterns implemented in js to use HTML data attributes, so they can be developed without running a backend server.

  2. Use modern AMD approach to declaring dependencies on other js libs.

  3. Full unit testing of js

Install & Run Tests

Install Node version 0.10 or greater

Install using package manager, e.g. apt or yum

Install without using package manager

Install PhantomJS

Download and install PhantomJS

Maybe use your package manager:

$ apt-get install phantomjs

Now git clone & build Mockup:

$ git clone
$ cd mockup
$ make bootstrap

Run tests with PhantomJS:

$ make test

Run tests with Chrome:

$ make test-dev

Generate widgets.pot file in the working directory for Plone translations:

$ make i18n-dump

If you are currently in the buildout.coredev/src/mockup folder and want to update the translations in, first go back in the buildout.coredev folder, copy widgets.pot in the package and resync the po files like this:

$ cd ../..
$ cp src/mockup/widgets.pot src/
$ bin/buildout -c experimental/i18n.cfg  # to have the bin/i18n command
$ bin/i18n widgets

If you did some changes in the js files and want to test them live in Plone:

  • go to Site Setup -> Resource Registries

  • click on the “Development Mode (only logged in users)” checkbox

  • click on the “Develop Javascript” button for the plone-editor-tools bundle (for folder contents changes, may be another bundle for an other pattern)

  • click the “Save” button

  • refresh your page (folder contents for example)

To have the js changes in the next Plone release, you need to build the bundles, see README of plone.staticresources You may be interested reading JavaScript For Plone Developers and Resource Registry documentation too.

To test a translation, for example French:

  • edit the po file src/

  • restart your instance to rebuild the mo file from the po file

  • purge your localStorage and refresh the page to trigger a new download of the translations

The translations are handled by mockup/js/i18n.js that calls the plonejsi18n view defined in to generate a json of the translations from the mo file. The plonejsi18n view is called one time for a given domain and language and the result is cached in localStorage for 24 hours. The only way to test the new translations is to restart the instance to update the mo file from the po file, and then to purge the localStorage to trigger a new download of the translations.


The BSD 3-Clause License. Copyrights hold the Plone Foundation. See LICENSE.rst for details.


Originally created by Rok Garbas using parts of Patterns library. Now maintained by the Plone Foundation.

Status of builds

Travis CI Coveralls Bitdeli

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

mockup-4.0.2.tar.gz (531.2 kB view hashes)

Uploaded source

Built Distribution

mockup-4.0.2-py2.py3-none-any.whl (701.1 kB view hashes)

Uploaded py2 py3

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page