Maquette

Minimalistic Virtual DOM library with support for animated transitions

Live demonstration

Code:

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 with maquette?
We have created a fun tutorial which will teach you everything you need to know.

Start the tutorial

News

  • 22 Mar 2016

    Blog: How inefficiency can lead to better performance

    Virtual DOM is an algorithm where the entire web page is reconstructed from scratch every time something happens.

  • 18 Mar 2016

    Maquette 2.3 and unit testing

    We consider maquette to be mainly feature-complete, which means that this minor update only contains a few small additions.

  • 8 Feb 2016

    Maquette 2.2 now also supports JSX

    lot of code has changed in maquette 2.2, but there are almost no API changes since version 2.1. This is because maquette is now converted to Typescript and all of the functionality

  • 15 Dec 2015

    Maquette with Typescript quick-start

    I am very enthusiastic about writing web applications using Typescript combined with maquette. I think a typed language combined with a virtual DOM really solves a lot of problems and boosts productivity...read more

  • 15 Jul 2015

    Maquette loves Typescript

    We recently gained some experience using Maquette with Typescript. We were very impressed by how well Typescript is supported by IDE’s and how well it integrates with NodeJS build...

More news

Credits

We are grateful for the following projects which inspired maquette:

  • React for inventing the virtual DOM technology.
  • Mithril for showing how simple and lightweight a virtual DOM can be.
  • Mercury for exploring several techniques and optimizations.