moqups

Thanks! It's mostly vanilla JS and the Ractive framework for the editor UI.

Thanks for letting us know! We're happy to hear that.

We've changed the product quite a bit in response to the huge projects that our users create on our design platform. Nevertheless, we've also faced quite a few engineering issues in respect to browser performance and real time backend data synchronization.

Moqups: https://news.ycombinator.com/item?id=4222992

We're still bootstrapped and fairly small (< 25 employees including the founders). We've grown organically to about 1 million users since then. The feedback we've got on our submission back then gave us enough courage to go from just a pet side-project to a full time business, so Big Thanks HN! That day was one of the happiest days in the history of our business.

Moqups[1], our HTML5 based mockup/wireframing app, is completely free for education, non profit and open source projects. To our great surprise, we get a fairly large amount of requests each week from many universities and from open source developers. Aaaand we're happy to fulfill all of them :-)

[1] https://moqups.com

It's probably because Firefox does not support many presentation attributes as well as proper font antialiasing for the text and tspan SVG tags. It looks like they did create their own text layout engine with support for flowing around arbitrary shapes.

I'm curious how well this works, since emulating native text capabilities (just think RTL vs LTR) requires an insane amount of Javascript and the performance is pretty terrible for texts longer than a few hundred words. If they got this right, it must be a masterpiece of Javascript code. Google recently introduced their own text layout capabilities in Google Docs (also SVG based) and it's pretty buggy beyond simple text. Just to highlight the complexity of the issue, they used to render text into SVG on the server until recently.

It's one of the reasons we had to use foreignObject with pure HTML inside for Moqups instead, although it prevents us from supporting IE at all, including IE 11. We can at least target Webkit/Blink & Gecko this way.

[1] https://developer.mozilla.org/en/docs/SVG_in_Firefox [2] http://www.w3.org/TR/2013/WD-css-shapes-1-20130620/

We decided to avoid publishing an indexable listing of public projects so we can protect the privacy of our users at least to the extent where they don't publish the unique, indecipherable link themselves ("Available to anyone who knows the link"). We think it's the most ethical approach for handling this situation.

Hi Matt, don't worry - we really appreciate and reflect upon all kinds of feedback, specially the most honest ones. We may disagree on various topics, but that's what makes a good debate!

Master Pages might help here. We're also planning to add Master Objects to make this even easier.

We're looking at elegant but simple ways of adding support for other states (hover, double click and so on).

We're very happy to hear this. Our newsletter is in the works - we've been quite swamped by the launch :)

Thank you - you have a very valid point with the image limitations so we'll reconsider.

We're also planning many more integrations and Basecamp is close our radar. We're seeing huge amounts of traffic coming from tools like Aptana, Trello or Basecamp so this makes a lot of sense.

Stay tuned!

Thanks a lot for the candid feedback!

It took us a while (and more than 60,000 free users!) to better understand our business metrics and see what our opportunities are until we've made these not always easy decisions. We also had a look at what our competing products are offering and many times it's nothing more than a free, very limited trial.

Let me try to shed some more light about the free version: - We've tried to avoid disabling common sense functionality just for forcing users to upgrade. Unlimited saving, unlimited exporting, unlimited pages and so on. Keep in mind that all mockups are throwaway artifacts that one can simply export and then safely delete their projects. It's a little inconvenient but it's not a finite resource that users can't replenish like in a case of a time limited trial. The premium features are typically wanted by business users who like a little more granular privacy settings, run multiple projects through their many customers or prospects or have extremely big projects that can benefit from productivity features like master pages. The premium users even avoid using our service for free if they don't have some confidence that someone is running a sustainable and trustworthy business in behind.

- There is no data loss when you downgrade from a premium plan. The only thing we do is gracefully disable some premium functionality and restrict editing (not viewing) to projects created in the premium period.

- All the users who signed up before got to keep their projects and the editing capabilities. Some of them have more than 150 huge projects.

- On top of this, we are giving non profit and educational organizations as well as open source teams free premium plans.

- We rarely say no to users asking for discounts or extended trials if they can't afford the premium plans.

Our most important goal for us is to create a business we can grow so we can bring more value for our users - we really have a ton of great features in the pipeline that we're excited about.

Time will tell whether we've made the right steps or if we have to make certain adjustments to our business.

Thanks again!

Edit: line breaks

Thanks for your input! Here's the link to the actual HTML5 App: https://moqups.com/

At Moqups ( https://moqups.com ) we've been through a very painful process of trying to implement a word wrap component in SVG and after a few months decided to throw it out and use foreignObject. We decided that it's impossible to be able to cover the thousands of text handling scenarios for all the languages and scripts out there and the performance makes it very unfeasible beyond a few hundred words. With few exceptions related to measuring text across browsers/operating systems, this was a very good decision.

Sadly it's also the main reason for why we're not planning to support any version of IE moving forward although many users request it.

Slightly unrelated, but I'm also happy to see getStrokeBBox in there. It's been a total pain to manually compute the stroked bbox of each stencil so the layout engine can properly arrange each element in respect to its painted area.

Moqups is free while in Beta. Additionally, the main use cases will always be free (with some reasonable limitations). The premium features will revolve around collaboration, feedback, annotations and other things. When these are launched, we'll definitely make the pricing clear and visible for everyone.

We've selected SVG over Canvas for many reasons.

I'll try to elaborate a few:

- With SVG we can easily draw very complex geometry, resulting in nice looking, configurable stencils, interactivity and many other features that would've required immense engineering efforts to achieve in pure Canvas backed up by heavy Javascript. This would've have reduced our creativity and ability to adapt fast moving forward. Creating new stencils and adapting to new UI trends is a breeze now. With Canvas, the situation would've been different and highly coupled in the back of the Javascript code.

- SVG is resolution independent. While we haven't optimized Moqups for a full mobile experience YET, if you look at some mockups on any Hi-DPI (Retina) display, the experience is simply gorgeous. Printing is also a great addition, because you can virtually print huge sheets without loss of quality, making face to face collaboration great.

- SVG is heavily used for precise visualizations and technical drawing in industrial engineering, outside its web roots. Not sure how to properly explain this - We just kind of wanted to pay some homage to these folks.

The learning curve for SVG was tremendous though, with many obstacles that made us cringe and almost and  quit at points. This is mostly because SVG is such an underused technology nowadays and the documentation is still scarce. However, it was extremely fun and it's nice to see that SVG is becoming more and more relevant nowadays in the context of HTML5.

About performance: Despite the many optimizations we have done, we still have quite a few technical debts that, once fixed, will make Moqups even faster and behave well with a lot of objects. Beside this, Chrome and others are about to introduce hardware acceleration for the SVG layers soon, so all in all, more good news.

Moqups is free while in Beta. Additionally, the main use cases will always be free (with some reasonable limitations).

The premium features will revolve around collaboration, feedback, annotations and other things. When these are launched, we'll definitely make the pricing clear and visible for everyone.

Not yet. We're planning Offline support, Google Drive, notifications and many others.

Incredibly good feedback. Thank you!

A lot of these items are on our plate already and we'll address them as soon as we get some bandwidth.

- We'll try to improve the Stencil/Images tab usability - Stencils are already using tags/aliases when searching them. Categories will be extremely beneficial as well. - Templates are on our plate too.

Once you sign in and save the project, you can easily get the permalink of the project in the Share popover.

Pheeeew! Indeed. It was quite a challenge. After spending two months into building a custom text layout engine, we ended up throwing all the code out the window, mostly because the performance was terrible with more than a few hundred characters. Beside this, there were a gazillion other scenarios that we could not simply cover (kerning, spacing, i18n, ligatures, cross browser differences & so on).

We ended up using foreignObject for rendering text, with the compromise that we need to look for solutions to enable pure svg export. This is still a technical debt on our plate. A roundtrip solution that converts hybrid SVG into PostScript and then back into SVG may work... we'll see.

Either way, we'll start writing some technical articles on our blog, so others can take advantage of our findings (we really owe a LOT to the community)

Thank you!

- We'll definitely investigate the F1 key issue. We have a broader bug that causes the whole app to stop responding to keyboard shortcuts if the browser window is not focused first.

- Interesting, we'll look into also adding this behavior. It is indeed a common behavior, specially in diagramming software.

Thanks for the feedback. We're actually using Chalkboard, a close cousin of Comic Sans MS.

There is no need to stick to the default setting. Feel free to pick your favorite font style when you create a new project! Also, more advanced typography settings are also coming soon.

With all the honesty, we haven't decided yet.

Moqups will continue to be free in its simplest form, so feel free to enjoy it. After launching the premium features, we'll provide an application form and carefully analyze each application in order to determine if it's eligible for free use or not. Also, we'll make sure to provide more details about what is needed for qualifying in this program.

JSLint

Thank you. We're a completely bootstrapped startup (6 people). Moqups was created in our limited spare time for about a year where most of the time was spent on researching/optimizing the SVG engine and we really started to take it seriously in the last few months :-)

This feature is on our short term roadmap. We just wanted to spend a bit more time to get it right from the beginning.

We're planning to add inner snapping to various device stencils (iPhone for now and others in the future), as well as polishing various interactions. We also get very enthusiastic when planning features like master pages, rulers, cotations and so on. Stay tuned!

We plan on adding this feature very soon!

We will offer other features like collaboration as part of our premium offer. Our main focus for now is to provide the best possible experience to our users.

Edit: Ipad works to some degree, but the app is definitely not yet optimized for a great touch experience. We're also working hard on fixing that.