You are here: Home » NewsFeeds » Pencil – Multi-platform GUI Prototyping and Wireframing

Pencil – Multi-platform GUI Prototyping and Wireframing

A GUI prototyping tool for GNU/Linux, Windows & Mac.


This project was originally hosted on &
was abandoned around 2013. This fork was started for new development on March
13th, 2015.


Extra Stencil Collections

Additional collections are available on the
Original Stencil Download Page.


You will need version 36 or higher of firefox to run Pencil as a Firefox
Extension. Linux users will need version 36 of either firefox, iceweasel or
xulrunner. The Windows installer has everything you need built-in.


Windows, Linux & Firefox Packages are available for download from the
Releases Page.

For specific Linux distributions:

  • Arch Linux – Available in the AUR.
  • Nix/NixOS – Run nix-env -iA pencil. You’ll need to be tracking


Firefox Extension

Pencil can be installed as Firefox Extension, instead of a standalone
application. To build the extension’s XPI file:

cd build
./ xpi
firefox Outputs/Pencil*.xpi


cd build
./ linux
xulrunner Outputs/Linux/application.ini || firefox --app Outputs/Linux/application.ini

A Pencil-*-linux-pkg.tar.gz package will also be created. This contains
Pencil nested within the directory structure that most Linux distributions
expect(under /usr/share and /usr/bin) along with an executable, a desktop
entry & mimetype information. This can be used for creating
distribution-specific packages.


You’ll need curl installed so you can pull the Windows XULRunner runtime and
nsis to compile the installer.

cd build
./ win32

This should place an installer exe in the Outputs/ folder.


You’ll need curl installed to fetch the OS X XULRunner runtime.

This will create a in the Outputs/ folder.


To build the docs locally you’ll need Sphinx and the sphinx_rtd_theme,
which are easily installable using pip:

cd docs/
sudo pip install -r requirements.txt
make html
# Or if you want a PDF
make latexpdf

The output files will be put in /docs/build/.


You don’t have to be a programmer to contribute! All feature requests & bug
reports are appreciated. You can also update or improve the docs, package
Pencil for your Linux distribution, write some stencils, attempt to reproduce
bug reports or just spread the word 🙂


If you make changes that affect users, please update

If you set the DEBUG environmental variable, the script will
enable debugging features like printing calls to dump() to the console or
debug() to the javascript console:

export DEBUG=true
cd build
./ linux
# If you've got XULRunner:
xulrunner Outputs/Linux/application.ini -console -jsconsole -purgecaches
# If you only have Firefox installed:
firefox --app Outputs/Linux/application.ini -console -jsconsole -purgecaches

Setting DEBUG will cause also Pencil to start a remote debugging server on
port 6000. This lets you use Firefox’s DOM Inspector to debug Pencil. You can
connect Firefox to the debugging server by going to Firefox -> Tools -> Web
Developer -> Connect...
. You may need to enable Remote Debugging under
Firefox’s Web Developer Tools Settings(Ctrl-Shift-I then click the gear
icon in the upper-right).

The Build System

The script is responsible for building everything. Each build is
usually in two steps: copying & modifying files common to all builds then
customizing those files for the specific build(by removing files, embedding
xulrunner, creating the expected directory structure, etc.).

The build script uses the file to hold variables such as the
current version & the minimum/maximum firefox/xulrunner versions. The script
uses to replace all instances of @VARIABLE@ with the value of
VARIABLE in the file passed to it.

If you add a variable to you must modify the
script to replace the variable. If you add a variable to a file, you must
make sure that file is processed by at some point(usually in the
prep() function). uses the sed-debug-script to remove all the text between
//DEBUG_BEGIN and //DEBUG_END. This can be used to enable code only when
building for development. If you add //DEBUG_BEGIN and //DEBUG_END to a
file, make sure passes the file to, this usually
happens in the prep() function).

You can pass the clean argument to to remove all the outputs. You
can use maintainer-clean to remove any XULRunner downloads as well.

Creating a Release

Start off by changing the version numbers in build/ &
docs/source/conf.pyand sectioning off the changes in Then run
cd build; ./ & test the built packages in Outputs.

If everything looks OK, update the pkgver & sha256sums variables in the
build/ArchLinux/PKGBUILD file & commit all the changes(with a message like
Prepare for v2.0.8 Release).

Create a new tag, merge it into master & push:

git checkout develop
git tag -s -a v2.0.8
git checkout master
git merge develop
git push
git push --tags

Upload the packages in build/Outputs/ to the new Release created on Github.
Update the GNU/Linux distro-specific packages or ping their maintainers.


This fork is released under GPLv2 like it’s parent codebase.


Original article