The maquette tutorial

This tutorial will teach you how to use the maquette library. The application we are building in this tutorial is a remote control for a flying saucer. This tutorial is made for people who are already familiar with HTML and Javascript.


In this first exercise you will create the flying saucer we are going to control. Thanks to some alien piece of CSS, all that is needed to create the the flying saucer is the following markup: <div class="saucer" />Greetings</div>

Hyperscript 101

Because maquette allows you to use data to create the right browser DOM, it does not use HTML. Maquette uses a notation called hyperscript. Hyperscript is essentially just a javascript function, h(), which creates a virtual DOM node.

The first parameter of the h() function is a CSS selector string, like "div.landscape", which results in <div class="landscape">. The final parameters represent the content. Strings become text, and h() calls create childnodes.

The workbench

In the workbench below you can edit the sourcefiles for this exercise. In order to create the flying saucer, you need to complement the renderMaquette() function. The next button at the bottom will be unlocked once you complete the objective. Good luck!