Show Me Some MochiKit

Currently, MochiKit development is focused on code and documentation. We do plan on authoring more examples and tutorials, but we hope that what's here will help you dive right in.


A minimal JavaScript interactive interpreter showing off some MochiKit.DOM functionality. Play with MochiKit right in your browser!

Key Events

An example demonstrating key handling using MochiKit.Signal.


An example demonstrating how to create a simple CSS based drag handler using MochiKit.Signal.

Logging Pane

A simple page to demonstrate inline and pop-up (debuggingBookmarklet) modes of MochiKit.LoggingPane, as well as the various MochiKit.Logging log levels.


A JavaScript Regular Expression (RegExp) Explorer built with MochiKit.DOM and MochiKit.Async.


Uses MochiKit.DOM and MochiKit.Async along with dp.SyntaxHighlighter to provide syntax highlighting for its own source code, and the sources for all of the other examples! The source file path is read in from location.hash, and loaded with doSimpleXMLHttpRequest, and then inserted into the DOM with replaceChildNodes.

AJAX Tables

Demonstrates a comprehensive MochiKit application, building on the sortable tables example. This one includes extensive usage of MochiKit.Async to load XML and JSON documents. This example includes XMLHttpRequest-loaded documents, a simple DOM attribute templating language (implemented *entirely* in the example), and sortable tables.

Sortable Tables

Demonstrates the ease of use of MochiKit.DOM. It takes a plain old HTML table, and makes it sortable on the fly. It even converts the dates to Date objects, and does a proper sort of those too! Other libraries might give you sortable tables, but MochiKit makes it so easy that we simply do it from scratch as an example!

Color Wheel

Shows off the color support (the full CSS3 color model!) in MochiKit.Color. For browsers that support CSS3 rgba() colors (Safari), you'll see real alpha blending. For other browsers, it will emulate alpha blending by blending with the background color.

MochiKit.Visual effects

Demos for each of the effects included with MochiKit.Visual.

Rounded Corners

Want fancy looking HTML elements with rounded corners, but don't want to do any weird image hacks? Do it in JavaScript! MochiKit.Visual makes it completely painless, and this example shows it off.