Maquette

Pure and simple virtual DOM library

Code:

var yourName = ''; // Piece of data

// Plain event handler
function handleNameInput(evt) {
  yourName = evt.target.value;
}

// This function uses the 'hyperscript' notation to create the virtual DOM.
function render() {
  return h('div', [
    h('input', {
      type: 'text', placeholder: 'What is your name?',
      value: yourName, oninput: handleNameInput
    }),
    h('p.output', ['Hello ' + (yourName || 'you') + '!'])
  ]);
}

projector.append(domNode, render);

Live result:

Why Maquette

Maquette is a virtual DOM implementation that excels in both speed and simplicity. It solves the problem of keeping the user interface in sync with underlying data.

Maquette allows you to specify the UI using plain Javascript. This makes maquette easy to learn, easy to debug and easy to deploy. Maquette is very unopionated by design, making integration with other frameworks and libraries as painless as possible.

Get started

Are you ready to get started?
We created a fun tutorial where you will learn how to use maquette.

Start tutorial