Who thinks it's a good idea for StackExchange to integrate with Balsamiq for UX.StackExchange? I do, and I'd be really happy if we had the ability to make mockups on UX for UX.

This is something for SE to spend unicorn dollars on. Fogbugz has Balsamiq, UX should get it too!

  • 2
    this would definetely give more quality to responses/questions Commented Jan 2, 2012 at 18:11
  • 2
    I would propose Pencil instead. Commented Jan 26, 2012 at 18:09
  • @balpha's_replacement, There's an error message: "The Mockup Editor does not support touch devices.". The ability to use touchscreens favors a different editor or a modification to the existing one.
    – Rob
    Commented Jan 28, 2020 at 18:17

4 Answers 4


This is a great idea, and we've been working with the nice people at Balsamiq to make it happen. It's now enabled.

The editor has a new button:

UI wireframe button

Clicking it will launch the Balsamiq editor. This requires Flash to be available in your browser. Leaving the mockup editor will take you back to the Markdown editor, automatically inserting the mockup into your post (if you used "Save") or discard it (if you used "Close").

save and close buttons in the mockup editor

This was a somewhat peculiar project, since it's the first time anywhere on the Stack Exchange network that we launch another editor from within the Markdown editor. We have tried to keep the user experience around it as intuitive as possible; in particular, the following points were important:

  1. It should not get in the way of editing the regular Markdown source. To fix a typo in a post that contains a mockup, you shouldn't have to worry about the Balsamiq editor.

    We also didn't want to store the actual mockup data within the Markdown source, since this would mean tons of XML tag soup scattered in the post, making it harder to find your way around when editing.

    With or without mockups, the editing workflow should be as close as possible to what our users are used to.

  2. The mockup should stay editable. To make a change to an existing mockup, you shouldn't have to recreate it from scratch.

To reach these goals, here's what we came up with: The mockup you add to a post ends up as a regular image, as usual hosted by our image hosting provider Imgur. The markdown source contains a plain old Markdown image. The only difference to the "normal" case is that it is surrounded by HTML comments like this:

<!-- Begin mockup: In order to preserve an editable mockup, please
     don't edit this section directly.
     Click the "edit" link below the image in the preview instead. -->


<!-- End mockup -->

These comments serve two purposes at the same time: They tell the user that this is a special image that has more to it than meets the eye, and they tell the Markdown editor that this image was created through the mockup editor, so it knows to offer an "edit this mockup" functionality. Our server knows the mockup data that was used to create this image, so it's possible to make changes to a mockup later (point 2.)

If you have any comments, suggestions, or bug reports regarding the mockup editing workflow (and, given the nature of this community, I'm sure you will), please post them here on meta.ux, tagging them .

This feature has the same reputation restriction as for posting any other images, i.e. you need 10 reputation unless it's a suggested edit.


It's done! http://blogs.balsamiq.com/product/2012/02/27/uxstackexchange/ :)


I would be happy to provide a site license (for Mockuptiger) to SE for UX. My app is a php+mysql based so not sure what platform SE is based on?

MockupTiger is just like wordpress and HTML5 based so it should be easily hostable on any lamp or wamp stack

  • No Undo/Redo? oh oh! Commented Jan 10, 2012 at 12:48
  • 1
    undo/redo is coming. but why the down vote?
    – Nilesh
    Commented Jan 11, 2012 at 13:03
  • I don't know - the downvote wasn't mine. Commented Jan 11, 2012 at 13:06
  • On Meta sites down-votes count as a sign of disagreement. Commented Jan 26, 2012 at 18:27

That's a great idea IMHO. Except for the dollars part. Balsamiq, or any wireframing tools manufacturer, for that matter, should be the one to pay SE, not the other way around.


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .