A rough experiment smashing together the style editor and scratchpad.
JavaScript CSS
Clone or download
Pull request Compare This branch is 35 commits ahead of campd:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


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 git@github.com:bgrins/itchpad.git
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](https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/cfx#cfx_run))
cfx run -b /path/to/fx-team/obj-x86_64-apple-darwin12.5.0/dist/NightlyDebug.app/Contents/MacOS/firefox

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:


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 https://addons.mozilla.org/en-US/firefox/addon/autoinstaller/. 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.