Source Editing
When a file is opened, it opens in Design mode. You can then view the file's contents in one of the following modes:
- Design mode - default mode that displays widgets on the canvas
- Source mode - displays the source code that creates the design
- Vertical Split mode - the left side is in design mode, the right side is in source mode
- Horizontal Split Mode - the top half is in design mode, the bottom half is in source mode
You can switch modes by clicking on one of the icons in the right side of the Page Editor Toolbar.
In Source mode, the canvas shows the HTML source code for your page. The source code you see is the actual HTML source code that is saved by Maqetta. Maqetta is designed to create "developer-ready" UI prototypes in that the code exported by Maqetta is designed to allow developers to modify incrementally to add interaction and business logic while preserving the various visual features (e.g., CSS files and images) that the designers authored in Maqetta.
Maqetta includes bi-directionality between design and source views. For example, you can edit the label text strings in source view and delete widgets in source view, and these changes will be reflected when returning to design view.
The Maqetta team is working on sophisticated language parsers (HTML, CSS, JavaScript) that will enhance the product's ability to deal with arbitrary source code in future releases so long as the widgets are represented within HTML markup.