Skip to content


Switch branches/tags
This branch is 35 commits ahead of campd:master.

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Project Terms

  • Stores: A Store manages access to a set of Resources.

  • Resources: A Resource is a single item.

  • Project Stores/Resources: Resources that are worked on outside of the webpage, like on the local disk. They can be read from and saved to, but not applied.

  • Live Stores/Resources: Resources in a running web page. They can be read from and possibly applied to, but they cannot be saved to.

  • Pair: When a live resource and project resource are associated with each other, they're treated as a Pair.

  • Aspects: Live and Project are two Aspects of a Pair.

  • Shell: A viewer for a pair. Would like a better name for this.

  • Editor: a single text editor.

  • ShellDeck: a deck of shells.


Install the extension. Then require the Itchpad API:

let Itchpad = require("itchpad");

let iframe = document.getElementById("itchpad-iframe");

let itchpad = Itchpad.Itchpad(iframe);


To Run Locally

The basic workflow is generating an XPI file and adding this to the browser with your specified profile. This is automated with grunt. See the [gruntfile](Gruntfile.js for more information). Run:

# If you don't have grunt yet installed
npm install -g grunt-cli

git clone
cd itchpad
npm install
grunt xpi # Will download addon sdk locally, and generate an itchpad.xpi file

What if I don't want to use grunt? This just wraps up the addon sdk, so if you have the cfx binary somewhere on your path, you can do whatever you want with it:

# The -b is optional, but will run with a specified binary (see the [docs](
cfx run -b /path/to/fx-team/obj-x86_64-apple-darwin12.5.0/dist/

cfx xpi # get an xpi and run it in another profile

Once it the browser is running, you can open chrome://itchpad/content/itchpad.xul in the main window - this allows the content to be inspected better than a popup window.

To open in a new window, you can use:"chrome://itchpad/content/itchpad.xul","Itchpad","resizable,scrollbars,status");

I also set the logging level for extensions so I can see console.logs - extensions.sdk.console.logLevel -> "all".

To auto run after updates

There are some tools to make the workflow quicker than running cfx run or reinstalling the xpi after each change.

Install More about this on the Getting started with cfx page.

Then run:

grunt watch

Now just make changes to the project and it will auto post to the running browser.

If you'd rather use your own cfx, then use:

cfx xpi
wget --post-file=itchpad.xpi http://localhost:8888/

Now reload the chrome://itchpad/content/itchpad.xul page and it should be running the latest version.


A rough experiment smashing together the style editor and scratchpad.






No packages published


  • JavaScript 96.0%
  • CSS 4.0%