Maqetta: Visual authoring of HTML5 user interfaces - in the browser!

Maqetta is an open source project that provides WYSIWYG visual authoring of HTML5 user interfaces. The Maqetta application itself is authored in HTML, and therefore runs in the browser without requiring additional plugins or downloads.

Maqetta is an open source technology initiative at Dojo Foundation that provides WYSIWYG tooling in the cloud for HTML5 (desktop and mobile). Maqetta allows User Experience Designers (UXD) to perform drag/drop assembly of live UI mockups.

One of Maqetta's key design goals is to create developer-ready UI mockups that promote efficient hand-off from designers to developers. The user interfaces created by Maqetta are real-life web applications that can be handed off to developers, who can then transform the application incrementally from UI mockup into final shipping application. While we expect the Maqetta-created mockups often will go through major code changes, Maqetta is designed to promote preservation of visual assets, particularly the CSS style sheets, across the development life cycle. As a result, the careful pixel-level styling efforts by the UI team will carry through into the final shipping application. To help with the designer/developer hand-off, Maqetta includes a "download into ZIP" feature to create a ZIP image that can be imported into a developer tool workspace (e.g., Eclipse IDE).

For team development, Maqetta includes a web-based review and commenting features with forum-style comments and on-canvas annotations.

Maqetta came out of an internal IBM initiative to address the visual design requirements of IBM's various UXD teams. IBM contributed Maqetta's original code to open source to foster a community that can help create and maintain a strong suite of open source HTML5 visual tools.

Maqetta includes:

  • a WYSIWYG visual page editor for drawing out user interfaces
  • drag/drop mobile UI authoring within an exact-dimension device silhouette, such as the silhouette of an iPhone
  • simultaneous editing in either design or source views
  • deep support for CSS styling (the application includes a full CSS parser/modeler)
  • a mechanism for organizing a UI prototype into a series of "application states" (aka "screens" or "panels") which allows a UI designer to define interactivity without programming
  • a web-based review and commenting feature where the author can submit a live UI mockup for review by his team members
  • a "wireframing" feature that allows UI designers to create UI proposals that have a hand-drawn look
  • a theme editor for customizing the visual styling of a collection of widgets
  • export options that allow for smooth hand-off of the UI mockups into leading developer tools such as Eclipse
  • Maqetta's code base has a toolkit-independent architecture that allows for plugging in arbitrary widget libraries and CSS themes.