Skip to main content

graduated technologies

technologies that jStart is no longer actively working on

Maqetta: WYSIWYG visual authoring of HTML5 user interfaces

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 the advantages HTML5 offers developers is a unified method to build applications across platforms and even environments (desktop vs. mobile). While HTML5 has garnered wide adoption, both on the desktop and mobile arenas, creation and assembly of User Interfaces for HTML5 applications has been lagging. Shouldn't there exist a tool which aids UI/UX professionals to create HTML5 interfaces as quickly as HTML5 allows applications to be generated? Shouldn't such a tool encourage iteration and incremental innovations...while providing a very low learning curve? IBM Emerging Technologies decided to tackle this challenge--and created Maqetta.

Maqetta features:

  • Web-based WYSIWYG editor - Maqetta provides an online environment to create, manage, and develop UI mockups--mockups which are developer-ready and that can be handed off to developers for implementation into their applications.
  • Drag & Drop Mobile UI Authoring - Maqetta includes many features specific to mobile UI authoring, including true WYSIWYG authoring inside of a life-size device replica, multi-screen authoring without programming, automatic CSS theme switching based on target device, visual mobile CSS theme editor, and web-based mobile UI review and commenting.
  • Streamlined UI Authoring - Maqetta has been designed to make the life of the UI professional easier: it allows for simultaneous editing in design or source views, it has deep support for CSS styling, it is designed to reflect various application states (screens and/or panels), and edit those states without programming.
  • Advanced Authoring Tooling - Included in Maqetta are advanced UI tools including wireframing, a theme editor, and export options to allow the mock-up to be "handed off" to developers for integration into their applications.
  • Project Collaboration - Maqetta also makes peer commenting and reviews simple by building those features into the system--mockups can be shared live with team members.
  • Integration w/existing toolkits/libraries - Maqetta doesn't ask you to abandon your favorite UI toolkits or libraries--instead, it allows you to plug in your favorite libraries, CSS themes/styles, etc. and leverage them from within Maqetta.

Why an HTML5 UI authoring tool?

Part of the role of IBM Emerging Technologies is to encourage adoption of key concepts which we believe are gateway technologies. Part of executing on this mission is to lower the barriers of entry for technologies, and hopefully promote those technologies to a wider audience in turn. Maqetta is an attempt to do just this--IBM Emerging Technologies identified a gap slowing HTML5 adoption by the lack of a comprehensive HTML5 UI authoring tool--and sought to address that gap by developing a technology to meet that need. In order to encourage the widest adoption possible (and to contribute back to the HTML5 community), IBM Emerging Technologies made the decision to open source Maqetta.

getting started...

Try Maqetta out today Probably the best way to experience Maqetta is to dive right in. IBM Emerging Technologies has made a demo version of Maqetta available, free, without registration, and open to the public.

Maqetta Website For all the latest on Maqetta, including how you can contribute to the project, FAQ, tutorials, and documentation, try the Maqetta website.