Caja Playground

The Caja Playground is a programming environment where you can quickly enter, or link to, HTML, CSS and JavaScript code, and immediately run it under Caja.

Running the Playground

The easiest way to get familiar with Caja is by trying out a few simple snippets in the Caja Playground.

Visit the playground by opening in another tab or window.

You should see the Caja playground:

UI screenshot

Click on "Canvas Clock" in the menu on the left panel:

UI screenshot

The HTML source of the "Canvas Clock" loads and is displayed in the Source tab. Note that you can modify the source before cajoling it, as well as reference other scripts, stylesheets, images and other webpages as you ordinarily do in HTML.

Click Cajole to see the result:

UI screenshot

To use the cajoled code, you can switch to the Cajoled Source tab and cut and paste it into your source file. The Cajoled Source tab includes a link to caja.js which sets up your page as a host page.


  • You learned how to use the Caja Playground; and
  • You saw how the various tabs in the Playground allow you to examine the internals of how Caja transforms code.

Next steps