Create menu
To create a new sketch application, press on the Create menu and choose one of "Sketch (high-fidelity)" or "Sketch (high-fidelity)". With either command, Maqettta will open a page editor in sketch mode, where Maqetta acts as a simple drawing tool. Widgets are absolutely positioned relative to their parent container. The difference between the two sketch modes:

  • Sketching (high-fidelity) - Widgets will be rendered with final-form styling.
  • Sketching (low-fidelity) - Widgets will be rendered with pseudo hand-drawn styling.


The "Where" field indicates the parent folder for the new file. The drop down control shows the current target parent folder and will show a complete list of ancestor folders.

The right arrow next to "Where" opens up a view of your current workspace and provides a "New folder" button in case you need to create a new folder.

The "Theme..." button allows you to choose the initial CSS theme or theme set to use with the new HTML file.
Widgets Palette
The Palette contains the list of widgets that you can add to your document.

The widgets found in the Drawing Tools and Clip Art sections of the Palette are commonly used for sketching:

  • Drawing Tools - Simple geometric shapes, such as rectangles, circle/ellipses, lines, arrows, polylines, polylines with arrows, and simple point text.
  • Clip Art - A collection of resizable, commonly-used user interface clip art. Includes small-size icons such as "close", "help", "home" along with a few larger placeholder graphics such as "map" and "image". Also includes device silhouettes for some common mobile devices.


In sketch mode, you can also use any of the other widgets found in the widget palette. When you drop these widgets onto the page, they are positioned at absolute locations.
Outline palette
The Outline palette shows a hierarchy view of the widgets in your document.

You can reorder your widgets via drag/drop within the Outline palette.

The Outline palette also includes a context menu which allows many of the same widget operations (e.g., delete) that are available on the page editor canvas.
Bottom/left palettes
Files shows your file system in the cloud (see image at right). The Files palette toolbar includes commands for creating and managing projects, creating and managing project templates, downloading files and uploading files.

Reviews shows the list of review sessions which either you initiated or to which you have been invited.
Properties palettes
The various Properties palettes (Widget, Events, Layout, etc) are where you can change widget-specific property values. The various sections are:

  • Widget - This section lists widget-specific properties - e.g., a Checkbox widget has a "checked" property, whereas most other widgets will not have such a property. For most widgets, a 'title' property appears at the top. This corresponds to the HTML 'title' attribute and is often used for specifying tooltip text for a given widget.
  • Events - Defines the actions to take when certain events occur on a particular widget. Includes mouse events (e.g., onclick) and focus events for text entry widgets (i.e., onfocus and onblur).
  • Layout - Various CSS properties in the general area of layout. Includes CSS properties regarding size (e.g., 'width' and 'height') and location (e.g., 'left' and 'top'). Also includes CSS properties such as 'position', 'display', 'float', 'overflow' and 'opacity'.
  • Padding - CSS padding properties, including the 'padding' shortcut and the specific properties 'padding-top', 'padding-right', 'padding-bottom' and 'padding-left'.
  • Margin - CSS margin properties, including the 'margin' shortcut and the specific properties 'margin-top', 'margin-right', 'margin-bottom' and 'margin-left'.
  • Background - CSS background properties. The "..." buttons can be used to bring up the Background dialog, which allows picking background image and defining gradients.
  • Border - CSS border properties.
  • Fonts/Text - CSS properties having to do with text styling.
  • SVG - CSS properties that only apply to SVG content. These properties typically are used only for widgets from the Drawing Tools section of the Palette.


At the top of each of the various Properties palette are controls for setting the class and/or id values for the currently selected widget.
Scenes palette
The Scenes palette enables two things.

  • Application states - Maqetta includes an "application states" feature which allows users to define interactivity without programming. With the application states feature, you can organize your application into different states, and then define which widgets are visible (or styled differently) in each different states. State changes can be triggered using the Events palette.
  • Switching between Dojo Mobile Views - If you create a mobile application and include Dojo Mobile view widgets (View, ScrollableView or SwapView) in your application, the Scenes palette will show both the list of views, plus the hierarchy of views. You can easily switch between views by clicking on one of the view in the Scenes palette.
Visual design canvas
This area is where you create your sketch.

To add widgets to the page, simply drag/drop widgets from the Palette to the canvas.

When adding a new widget, sometimes Maqetta presents a data entry popup or dialog. On the right, you can see the data entry popup for a Button widget. You can click on the "?" icon to see what text entry options and rules apply to the format of the data for this particular widget.

To adjust widget options and CSS properties, click to select a particular widget and then change properties using the right-side properties palette (e.g., Widget, Events, Layout, etc.).