Privacy Policy and Cookies

By continuing to use our site, you agree to our Privacy Policy and our use of cookies to understand how you use our site, and to improve your experience. Learn More.
I Agree.

Transform your mockups into working screens backed by clean, clear code.

Design in a wireframe mockup tool such as Balsamiq, then instantly transform exported mockups into interactive applications backed by simple code that follows our best practices.

Use the tools you already know.

Many teams use simple wire-framing tools such as Balsamiq to create, edit, and share mockups of new user interfaces as part of the design process. This allows any product manager, business analyst, project manager, or end user to directly contribute to application design using an intuitive tool. In addition, Balsamiq enables your team to host, collaborate and iterate your UX projects on or offline before settling on a design for development.

Don't re-create. Re-use.

Once a mockup is complete and is handed off for implementation, developers must laboriously duplicate the mockup in actual code, one screen at a time. This is not only an enormous waste of time and effort, but typically causes extra iterations as developers inevitably miss subtle but important details.

The mockup import tool provides the missing link, bridging design and code, by enabling you to directly re-use your carefully designed layouts.

Go from design to code. Instantly.

The mockup importer accelerates development by converting mockups to clean, extensible code in one easy step. By deeply analyzing your mockup, the importer identifies the simplest code that will faithfully reproduce the UI you sketched. Containment relationships are automatically discovered, labels are automatically associated with input controls, and components are grouped into flexible layouts. The importer even compensates for imprecision in mockups, recognizing that a set of controls was meant to be perfectly aligned even if the mockup was a few pixels off.

No Limits.

The mockup importer fits neatly into the full enterprise development process, without hidden limitations. Screens created by the importer are in standard Component XML format and can be connected to real data sources in one step. Event handlers and business logic can be added while keeping the screen definition in XML, enabling a clean separation between layout and logic, and enabling non-developers to understand and modify screen layout without breaking business logic.

You can easily mix and match between screens created by the mockup importer and classic hand-coded screens and layouts. For example, if you have a highly dynamic, portal-style layout manager that can't be built just with XML, you can still use the importer to create portlets, wizards, and other screens controlled by your advanced layout manager. Or, you can create a screen that has a placeholder for a dynamically generated component, and insert that component programmatically after the importer-created screen is loaded.

The mockup importer lets you maintain any part of your application in easy-to-read, easy-to-modify XML, while still allowing advanced, data driven techniques to be used wherever appropriate - the best of both worlds.

Use the mockup importer with any mockup.

You can benefit from the mockup importer even if your organization doesn't currently use Balsamiq for mockups. If you receive mockups in another format (such as a file from an image editing tool or HTML page), use Balsamiq to build a new mockup with the importer continuously showing you the resulting screen on the fly. It's like sketching on a digital whiteboard with an Isomorphic engineer implementing your design in real-time.

Enhance the mockup importer to meet your needs

Would the mockup importer fit perfectly into your workflow if it had just one more feature? You can have it added! As with our other products, we have a Feature Sponsorship program that allows you to fund development of new features.