Show HN: Moqups - Vectorial mockups with HTML5 and SVG

As a huge Balsamiq user, I'm definitely pulling for you guys because I'm not completely happy with them.<p>The basic functionality is great, but having the ability to make clickable online demos where I could send links to people would be a killer feature that would make me switch very quickly.<p>Having said that, a few UX notes:<p>-You have incompletely applied the tab metaphor on the left-hand panel. For a while, I was trying to figure out why a label was a stencil but a paragraph was an image. At the very minimum, your "shaded" tab should extend under the other one to show that it applies to both columns.<p>-Categorizing your stencils, even a little bit, would help. Balsamiq screwed this up, and now they have a bunch of nonsensical categories (quick, what would you expect to find under media?)<p>-I would recommend grouping your stencils by things that tend to be used together. For example, form elements should be all together, mobile stuff too.<p>-I know you're not native, but the right-click context menu on Balsamiq is much better than putting the align/arrange/lock at the top of the screen. I use this stuff a lot, and the extra distance is a pain<p>-Also, I don't see the capability to have some sort of templates. That's definitely a must for any decent size project<p>/edit I just discovered the context menu (double delayed click is a good solution). Still think at least the lock button belongs on the menu and not at the top

Interesting tool! I'll definitely give this one a shot next time I'm mocking up. Having said that, if you need to explain something by saying "This is a bit tricky to master until you get a hold of it", that's probably because it's a bad idea.<p>It's confusing that you have "click" "click, then click" and "doubleclick" as three separate actions. They are too easy to mix up or accidentally activate. Why not take a page from Apple's design patterns and put a context-sensitive inspector panel on the right or top to hold things like fill, stroke, alignment etc. This is the way Omnigraffle, Illustrator, Keynote, Sketch etc. work and in my opinion it's a much more effective pattern than what you have now.<p>Impressive work. Hope to see more of this!

Wow I can't fathom the amount of work that has gone into this project. Was the multi-line editor a challenge? I know SVG Edit has been struggling with this feature for some time.

After looking at Balsamiq I've been thinking something web based, free and built on HTML5 would be much better.<p>Congratulations on what you've built!<p>2 features I would like to see are permalinks to a 'moqup', to send to clients, and also it would be nice to be able to import Balsamiq XML files.<p>EDIT: Just spotted the share feature, looks great.

Great looking app! What did you guys use as your IDE and what is your build process like? I'm currently in the process of transitioning a team from a thick client plugin architecture to HTML 5 and am interested in hearing from others how they have built impressive looking apps in Javascript and HTML.

Impressive!<p>Two comments:<p>- Using f1 on chrome brings up the Chrome help page. You might want to make that another button.<p>- It took me a while to realize that you're supposed to drag objects from the left, and not use the mouse to define where they should go. That lead me to accidentally select or move existing objects while attempting to place new objects with my mouse. I'm not sure how common my experience was and I'm not sure how to address it (or even that you should). But I figured you should still keep it in mind.

1. Will this be free forever or will it be bumped to a paid service?<p>2. Any plans of supporting the iPad as a HTML5 app?<p>Really liking the interface while building mockups (already started building them!).

I teach a Skillshare class about UI/UX/Mockups/Wireframes for mobile apps and I recommend Moqups to my students as a quick and fast way to start working.<p>Thanks for a great product!

Seemed to actually function on an iPad. Nice work. The competitive positioning to Balsamiq is clear and well placed. How will you generate revenue if its free?

Looks very similar to <a href="https://gomockingbird.com/" rel="nofollow">https://gomockingbird.com/</a> which has been around for a while.

Nice app. Do you mind sharing what technologies you use to power the app? e.g. any JavaScript libraries, frameworks, etc?

I love it!<p>...but performance really suffers after just 50-100+ objects :(<p>So of course I'm compelled to ask the devs: Why not Canvas?

Are there any optimizations in the Chrome app version of this?<p><a href="https://chrome.google.com/webstore/detail/nlfbhphohgafllkjnakmdppmmkjfbnke?utm_source=chrome-ntp-icon" rel="nofollow">https://chrome.google.com/webstore/detail/nlfbhphohgafllkjna...</a>

And I thought Balsamiq would never have a tough competitor! Great work, love it.

Looks awesome!<p>Small UI bug I noticed, the icon in the Tail section for "top left" is the same as the one for "left top" (<a href="http://cl.ly/340F1H030G1s3D2F2F2H" rel="nofollow">http://cl.ly/340F1H030G1s3D2F2F2H</a>)

Love it! You've got the 960 grid, how about some other common page template sizes that the UI can snap to, like iPhone, iPad. I'd also like to be able to go into that mode so I only see native (moqup style) controls as options..<p>I often want to bang out a layout so I know I've got UI / distribution of controls sorted and then know my general widths / positioning..<p>If the snapping as good, and I could export or easily grab the positioning / pixels that's something I'd pay a bit for..<p>Keep up the good work!!

Maybe it's just me, but I think apps like this need (NEED) to focus on tablets / touch screens if they really want to stand a chance.<p>Don't get me wrong. It's an impressive tool and I'm sure it will work for a lot of people. But there is nothing Moqups does that I myself can't do more quickly with pen and graph paper.<p>What I want is a intuitive experience for touch screens, instead of yet-another app that requires a bunch of clicking and dragging.

Does not work: I just see the logo, nothing loads. In the developer console, I only see<p>GET <a href="https://ssl.google-analytics.com/ga.js" rel="nofollow">https://ssl.google-analytics.com/ga.js</a> <a href="https://moqups.com/:26" rel="nofollow">https://moqups.com/:26</a> (anonymous function) <a href="https://moqups.com/:26" rel="nofollow">https://moqups.com/:26</a> (anonymous function)<p>failing<p>(I block ssl.google-analytics.com with my hosts file)

Beautiful!<p>1. After registration, the next UI-view doesn't show up immediately.<p>2. Adding more fonts and Social-media buttons. Even custom buttons too would be a great addition!<p>3. I'm a paranoid person and there are many like me. Please convince me strongly, How secure is it to keep someone's Idea in your Back-end servers?<p>4. Finally on long-term look for Building a platform and community around! May be you can bring Front-end designers to hire them straightaway.

I just used this to make mockups for a small project and it was awesome.<p>There's still lots of little polish things you can do, but the functionality is almost completely there. Extremely useful.<p>You did a really good job picking the bits that were most important (at least to me) before launch. The attempts at this that I've seen before were just way too feature-poor to be useful.<p>Great work!

Quick Feedback:<p>1. Looks fantastic!<p>2. Where's the pricing? Coming from the landing page, I could not find it. You should <i>really</i> make this easy to spot.

Nice. Even works somewhat on the iPad. Is it possible to have a different default font? Looks like comic sans now.

Found out how to do something that just blew my mind:<p>you can make your screenshots linkable very easily by adding a button over the part of the page, linking it to another page and then sending it to the back behind the photo.<p>even if the button is behind your screengrab photo, it will still link.<p>just wanted to share that little tip

You know, there are tons of other handwriting style fonts other than Comic Sans ...

This looks awesome!<p>Are there any plans to expand to other mockups? I currently use Gliffy for my ER diagrams and Process Flows. This just seems much cleaner and would love a connector-type feature.<p>I'm gonna use this for my next mock-up most definitely!

Looks real nice on Retina Mac.

As soon as you create reusable symbols across pages I will switch from balsamiq.

This was not obvious: I wanted to select many small items inside a large box, but I couldn't click-and-drag to select the small items without also selecting the large box. The solution was to lock the big box.

wow it's great to see the mockup space seeing some real innovtion and competition. I've had my own head down for the last six months working on my own mockup software and I agree that HTML5 is the way to go. Being able to demo a design on a mobile device is a killer feature. Also it's so heartening to see such a robust and enthusiastic response from the HN crowd... makes me feel just that little bit more confident that mockup software is a good category to be targeting.<p>All the best. I look forward to seeing what else you lot come up with :)

Awesome work, but I have one question that always plagued me... Maybe you can help with it. Why do all these mockup sites have the style of being drawn in a notebook?

Beautiful, clean, and smooth on Chrome (Win7).<p>Can you give any sort of idea of the development effort that went into this? (ie. # of programmers, time period from starting, etc.)

I like it a lot and wish I had your html/js chops. Quite intuitive too. I could quite easily sit at some cafe with a client and throw round ideas with this.

Wow, great show HN! Works very smoothly on Mac OS 10.7/Chrome. I'll bookmark this and use this myself as well as send to colleagues for sure. nice work.

Feels a bit laggy on my computer (linux+chrome) when dragging items around. But this looks really good! I might even start making mockups now.

This is fantastic. Blows Balsamiq out of the water.

Absolutely wonderful.<p>But I <i>hate</i> these merry fonts (the evil Comic Sans, and this one which I think is Chalkboard). Apart from that, perfect.

I like it. So much nicer-looking than current Balsamiq.<p>Out of interest, what did you use to do mockups for this app? ;)

So much comic sans!! Ahhhgg!!<p>In all seriousness, though, neat tool. It's kinda sluggish on the new iPad, though.

My first thought: "Wow". My second thought: "How do I give these people access to my wallet?"

please give option to change Comic Sans to soemthing else

Nice app. But I think the name moqups is a "bad choice"

Looks great - any plans on Google Drive integration?

Very impressive. Clearly lots of work. Good job.

Is there a way to create templates?

Pretty cool. I congratulate you.

Impressive.

awesome! what is this going to cost?

nice tool!

This article was submitted just six hours ago and it haves 275 points but is no longer in the front-page of HN, why? My only guess is that is because is not a YC Company.