
Show HN: Mockups fixed by making collaboration effortless, built with React - dwwoelfel
https://precursorapp.com
======
thebouv
I'm trying to figure out the audience.

I've never had to collaborate on a mockup. I make mockups. I review mockups. I
mark mockups up. But I've never wanted to do one live with someone else.
That's just me though so an example of when this is used would be great.

Some feedback: I use Balsamiq and have for years. The whole reason I use a
mockup tool in the first place is so I don't have to draw everything by hand
or make boxes in Photoshop. The ability to use pre-drawn UI items is golden.

While the collaboration features are cool and hi-tech, this seems like the
beginnings of a mockup tool, but not a full one yet. So saying "we fixed
mockups" seems a bit of a stretch. It's a nice start though and I look forward
to seeing where it goes.

~~~
mortenjorck
"Mockups" isn't really the right term here as far as I'm concerned – it
implies high fidelity, whereas this is a tool for rapid, low-fidelity idea
sketching. It looks like an excellent wireframing tool, not a mockup tool.

~~~
unholiness
It's just as fast to draw a browser window, button, or text box in Balsalmiq
as it is to draw a rectangle in Precursor, but the former makes it unambiguous
what I'm talking about.

The point of low-fidelity mockups is to make the conversation about the the
overall design without focusing on detail. If "low-fidelity" means moving from
basic web elements to basic geometry, it seems to me like that hinders the
conversation more than it helps.

------
swannodette
Just wanted to chime in and say this beautiful application was built with a
pretty cool technology stack: ClojureScript, Om (ClojureScript bindings to
React), Clojure and Datomic.

~~~
elwell
Yes, would very much like to see the source. Look like they _did_ open up an
Om profiling tool they made:
[https://github.com/PrecursorApp/om-i](https://github.com/PrecursorApp/om-i)

------
arihant
I have mixed feelings here:

1\. This is just wire-framing, not mock-ups. Adding mock-up features will take
away the realtime-discussion-ness of the product, so that's that.

2\. Wire-framing is essentially a brainstorming exercise. I'm not sure if it's
actually very worthy to do initial _brainstorm_ together.

3\. But, what is valuable is that once you brainstorm, to show that to
coworkers and let them make edits in realtime to discuss.

4\. However, this product is fully focused on making the _brainstorming_ part
collaborative, not the review part. So much so that for the review use case, I
can use it for free.

So I don't know. I'd still like to explore and brainstorm alone. Things must
pass a threshold before they are shown out. Maybe there is a market, but I
have never started on a blank canvas with a coworker.

------
foxpc
This is pretty amazing!

I am looking for a quick way to sketch some apps and this might be the
simplest way to do so even though it misses a couple of things.

Some of the things to improve:

* Snapping. Sometimes when the area is small, the snapping is annoying as I won't be able to vertically center text in the box even though it should be possible physically. Maybe, turning off snapping?

* More text settings (font size at least)

* Predefined elements. Surely, it must be kept simple but things like arrows would help a lot and my crooked hands won't have to draw crooked arrows :)

~~~
dwwoelfel
Thanks!

> Snapping

You might be able to do what you want by zooming in (alt + scroll). When
you're zoomed in, the snap interval is smaller.

You can also move text without any snapping with click+hold, then drag using
the text tool.

Grouping is also coming, which will allow you to auto-center text in a box.

> font size

You can change font size by hitting "+" or "-". It will affect all selected
text.

> Predefined elements

We're still working on this, but we remember everything you copy and paste.
You can manage them from the "Clipboard history" in the upper left menu. You
can use that to define your own components.

The next version of that feature will make it much easier to get the clips
that you starred into the document, without having to go through the menu.

For arrows, hold "A" and click the edges of 2 shapes. We'll create an arrow
between them.

------
dwwoelfel
If anybody from Trello is around, we'd love to do an integration. As Trello
users ourselves, we want to be able to attach a Precursor wireframe directly
to a card and sketch our ideas in a Precursor doc without leaving Trello.

Contact daniel@precursorapp.com

~~~
cachvico
Send them an email...

------
dluan
WOW impressed with the shortcuts. Within a second of loading, I started using
all the typical adobe shortcuts, and they even got a shift+? for the shortcut
menu.

That alone is pretty impressive and shows that these guys know who they are
building for. Well done!

* I know this is a tall order, but even adding some of the more technically difficult but basic functions like colors, shapes, borders, radiuses, gradients, etc would be incredible. Could you make a browser version of Sketch?

* * Slack needs to buy this app, now.

------
enriquecastl
I'd like to congratulate you for such an impressive user interface: so fast,
sleek and well designed. For the purpose of creating mocks I'd like to have
more prebuilt components though.

~~~
krisdol
Yes, being able to share/upload components for others to use would be stellar.

------
jondot
Amazing! I think you just raised the bar for UX. The level of detail is OCD
crazy.

Any chance you can share how you got to such polish? the workflow of modeling
the animations and UX? How you concluded SVG would be best? tooling you used?

Amazing!

~~~
dannykingme
Wow, that's awesome to hear about the polish. We move pretty fast, and
sometimes I worry about skipping over important details.

To get what polish we do have took a few things: 1) My cofounder and I have
been working together for a while and our workflows compliment each other. The
time we save with development usually gets spent on polish after shipping. 2)
This started as a side project for us, so we made a strong effort to find a
concept that was inherently simple. For example, the simpler we can make the
UI, the more users can concentrate on your ideas. So our motivation towards
the UI isn't to add more, it's to refine down when possible. 3) I use
Precursor everyday now, so it's important for me make sure things behave well
:)

We're not heavily-dependent on svg, it would be possible to render to canvas
or just to straight html. But svg has some niceties, like transforms on groups
and easy export to images. It definitely has its challenges (e.g., text
formatting, Safari bugs, etc.) but we get a lot of things for free, and it
helps keep sharing options pretty simple. Luckily our visual aesthetic is
pretty minimal, so we don't have to push things very hard on it.

------
1qaz2wsx3edc
I think something that could really help this app succeed, is sharable UI
elements.

There are a lot of common things I don't want to redraw (date pickers,
dropdowns, file uploads, etc, etc). However, I don't want these provided as a
static set, because the web and my needs are always changing/growing.

If I was able to browse the community's drawings and add them to my profile
for quick insertion into a mockup that would be great or even create my own
for reuse.

Just my two, \- Cheers

~~~
dwwoelfel
Curious what you think of our current approach to this.

We're worried about people spending a lot of time searching for the perfect
component instead of just sketching out their ideas. That's one of the big
problems that we see with tools like Omnigraffle.

But we recognize that people can work a lot faster if they don't have to keep
sketching out the same components in every wireframe. Our approach is to use
copy/paste as a mechanism for creating custom components.

We're already keeping track of everything you copy/paste from the canvas. You
can delete them, star them, and insert them into the canvas from the
"Clipboard history" in the menu at the top left. Our next step is to make them
easier to insert into the canvas.

~~~
1qaz2wsx3edc
Right, that works to some extent. However there is still an upfront cost of
drawing each component I want to use.

I think share-ability is important (seo/community, think of github repos). I'd
like to do something like google for "precursor datepicker" view/fork or
'save'/star/insert it or _maybe_ search in app for "datepicker"s.

That just my two cents, I think it creates a community and then as a whole
everyone benefits, while the tool still remains uncluttered (the workflow
remains the same, but components could be incorporated). Consider this: I
could have say 4 tabs open which I then copy & paste some components I found
into a mockup I'm working on. No searching in app, no component drawers, just
simple copy & pasting between tabs.

Also, tracking a clipboard doesn't really classify something as "important", I
mean, won't that list just get cluttered, I don't necessarily want to look
through 20 copies to find the one time I copied the whole component. And
workflow to update it might be a bit weird, do I edit it, re-copy it and re-
star it, delete the previous staring?

Really, just my two cents, food for thought, great work, I'm sure you know
better!

~~~
dwwoelfel
Thanks, I appreciate the reply!

You may be right about share-ability being important. It would be nice to see
some validation of that. For example, users sharing Precursor docs full of
their custom components, encouraging other users to copy the items. We might
build a couple of those ourselves to see if it gets any traction.

> Also, tracking a clipboard doesn't really classify something as "important"

We anticipated that problem. You can delete the clips that you don't want to
keep and star the important clips to keep them at the top of the list. They're
also ordered by creation time, so the cruft will just fall to the bottom.

For updating clipboard items, you'd have to go through the steps you describe.
But it wouldn't be especially difficult to allow people to edit the clipboard
items from the menu.

------
alextgordon
This is awesome. One tiny minor thing. Can you add a little bit of a delay to
releasing shift when drawing a shape?

I'm spoiled by the behaviour in Photoshop where there's a little bit of a
delay (~75ms) between releasing shift, and it taking effect. This means that
both shift and the mouse button can be released simultaneously, instead of
having to consciously be aware of the order that you release the keys.

~~~
dwwoelfel
Good idea, thanks!

------
JoelSutherland
This works amazingly well on a Surface with pen/touch. It's the fastest app
I've seen for going from idea to wireframes. So impressive that this could be
done with web tech.

------
guylepage3
Wow! Impressive tool. We already can see the use cases for our workflow. One
great one is when we need to quickly get the teams input on an idea or UI
element. Dare I say Slack for UI?

------
dbg31415
This is cool, in concept. But there's no way that drawing all the shapes
manually is an improvement over my existing system for creating annotated
wireframes using Balsamiq ([https://balsamiq.com/](https://balsamiq.com/)) and
Red Pen ([https://redpen.io/](https://redpen.io/)).

While I certainly do like feedback from the team, I don't want other people
marking up my wireframes in a way that makes it impossible to tell who drew
what / said what.

Site note, the latest version of Balsamiq is REALLY great. They added a bunch
of simple things like Font Awesome Icons, and the ability to keep all the
project wireframes in one file.

~~~
towelguy
Maybe assign a color to each participant and make the lines each draw have a
slight shine of their color? or color it on mouseover.

------
ripberge
No offense, but this tool seems pretty raw. Why announce it now?

[https://moqups.com](https://moqups.com) is a great web based mockup app I
have been using for a few years. It's very slick.

~~~
avtar
Perceived quality issues aside, Precursor appears to be free for public
projects. The site you linked contains the following text:

"The Free Plan includes 2 projects (limited to 300 objects) and 5MB of storage
to get you started."

~~~
ripberge
What business that develops software can't afford $9 a month for an upgraded
plan? The utility you get from this type of software far outweighs the cost.

Who wants their wireframes to be public projects? Maybe if you're working on
UI's for open source projects? I can't think of any other use cases.

Precursor's unique value propositions seem to be aimed at problems I would
guess few people have...

------
csel
Although there are many different tools out there, sometimes I just want to
fire something up and start working on it. Speed, as in how quickly you can
start working on something without having to tinker around with different
tools and components is a huge plus. Use case scenario = design meetings,
brainstorming sessions, client meetings etc. Plus the right click palette and
the UI is very useful.

Assigning different colors for users working on the same canvas will be
helpful to track who is working on what.

Considering this is an initial release, it is pretty amazing.

------
robotnoises
Very nice looking landing page. On the surface this seems to fill the void
left by Easel.

------
artursapek
I like the tool selection mechanism. One minor suggestion there: allow me to
make more quick, "jerky" gestures to select a tool by not limiting the size of
the circle when I click/release really fast. So I should just be able to right
click and flick to the right to get the rectangle tool. It's a tiny detail,
but one that might be fun to implement :)

------
mortenjorck
What's really great about this is that it is a prototyping tool that
_enforces_ low fidelity. Not having multiple colors, not getting to choose
fonts is actually a major feature, because it requires all collaborators to
focus on the layout and functionality before getting into the weeds.

~~~
eterm
Yup, that's why Balsamiq is particularly good for this kind of work.

------
malux85
Wow this is amazing! Great work guys. It's fluid and beautiful and functional.

------
desireco42
UX is great. Like others pointed out, it is of limited functionality. You
would need to add pre-made elements to be able to wireframe things. Then
ability to link those.

But UX is a solid foundation to continue developing this idea.

------
newobj
The app is not personally useful to me, but this has to be the best feeling
web app I've ever used. Fluid, no illusion-shattering glitches, everything
just works, including "desktopisms". Kudos.

------
leephillips
Apparently this is made with Om (Om makes React available to Clojurescript).

------
krat0sprakhar
Good work! Looks like its built in Om?

~~~
dwwoelfel
Good eye, it is built with Om. We've been pretty happy with it and even
published a tool to help find performance bottlenecks:
[https://github.com/precursorapp/om-i](https://github.com/precursorapp/om-i)

For the unfamiliar, Om is a ClojureScript React wrapper that makes React much
nicer to work with and adds some nice performance benefits out-of-the-box.
Nolan's intro post is pretty inspiring:
[http://swannodette.github.io/2013/12/17/the-future-of-
javasc...](http://swannodette.github.io/2013/12/17/the-future-of-javascript-
mvcs/)

~~~
BFay
I'm really impressed with the visual design, and curious about what's being
used to generate the CSS.

I'm also wondering, are there any difficulties that arise when working with
canvas and svg using just Om, or in plain React?

~~~
dwwoelfel
css is generated with less.

I can't say much about canvas, but using svg with React is a bit of a hassle.
There isn't built-in support for every svg tag and attribute, so we have to
maintain our own fork:
[https://github.com/precursorapp/react](https://github.com/precursorapp/react)

Once you add support for the tags, though, it's no different than working with
any other html in React. I think we'll see React start to eat into d3's
market-share pretty soon.

~~~
lgas
Can you elaborate on this a bit? I'm not that familiar with react itself,
having only used it through om, but I built a proof of concept that let me
work with SVGs via om with code like:

    
    
        (defcomponent circle-view [data]
          (render [_]
                  (let [size (get-in data [:circles :size])]
                    (html [:div.circle
                           [:svg {:height size
                                  :width size}
                            [:circle {:cx (/ size 2)
                                      :cy (/ size 2)
                                      :fill "yellow"
                                      :r (/ size 2)
                                      :stroke "green"
                                      :stroke-width 4}]]]))))
    

And it seemed to all work fine? (Using sablono obviously)

~~~
dwwoelfel
Oh sorry, I didn't mean to imply that none of the svg tags are present. Most
of the common svg things work, but there are lots of missing tags and
attributes. There's an issue for it here:
[https://github.com/facebook/react/pull/1032](https://github.com/facebook/react/pull/1032)

Some of the things we had to add for Precursor were clipPath, foreginObject,
mask, patternTransform, marker, and vector-effect.

~~~
lgas
Ah, ok, that makes sense. Thanks!

------
danhardman
Having trouble zooming in and out (ctrl + scroll). The zoom is incredibly
sensitive and once I've zoomed one way, I can't get back to normal... Only to
the polar opposite.

~~~
dwwoelfel
Use alt+scroll for less sensitive zoom.

You can also hit "1" to reset your viewport to the origin with no zoom.

It's a bit of an oddity that ctrl + scroll works at all--mac trackpads set the
ctrl key bit on the event when you use pinch-to-zoom. At the normal rate, the
pinch-to-zoom feels too sluggish, so I speed it up by 10x. Unfortunately, I
can't find a way to tell the difference between pinch-to-zoom on a mac
trackpad and normal ctrl + scroll.

~~~
moron4hire
Would something like this work?

    
    
        ontouchstart: scrollMultiplier = 10;
        ontouchend: if(evt.touches.length === 1) scrollMultiplier = 1;

~~~
dwwoelfel
I would have thought it would be a touch event, but it's actually a normal
scroll event. The only difference I can see is that it has the ctrl bit
flipped.

Here's the stackoverflow answer:
[http://stackoverflow.com/questions/15416851/catching-mac-
tra...](http://stackoverflow.com/questions/15416851/catching-mac-trackpad-
zoom)

~~~
moron4hire
I understand that, but do any of the touch events fire in parallel? Like, just
before the pinch happens, is there not a touch start even for when the fingers
touch the screen? The idea is to change the rate of the normal scroll event
only if there are fingers on the screen.

~~~
dwwoelfel
I don't think there are any touch events at all when you're using a trackpad
on a mac. For mobile, we can distinguish by the touch events.

~~~
moron4hire
Oh, yes, I'm sorry. I completely spaced on what you were saying.

------
rainings
First of all, this is an amazing app. It uses many SVG animation. But the
drawback about SVG animation is when it comes to cross browser support,
especially safari. You will have many issue working in safari browser. That is
one of the reason i still pending to implement cool SVG animation and UI in to
the real project development. Last but not least, Good work, keep it up.

------
Spooks
How did you find the process of working with React for this project compared
to other js libraries

~~~
dwwoelfel
It's much more pleasant to build UIs with lots of different states in React,
because you have a full programming language at your disposal. The last js
library I worked with was Knockout.js. Having to use Knockout's limited subset
of a programming language to do view logic meant that lots of view logic lived
in the models.

But the really big difference is in using ClojureScript. I converted
CircleCI's open-source frontend[1] to Om/React and it feels much closer to
backend codebase than a frontend. Brandon Bloom gave a good talk about it at
Clojure/West:
[https://www.youtube.com/watch?v=LNtQPSUi1iQ](https://www.youtube.com/watch?v=LNtQPSUi1iQ)

[1]
[https://github.com/circleci/frontend](https://github.com/circleci/frontend)

~~~
KurtMueller
Would you mind expounding a bit as to why the big difference in creating ui
was clojurescript? Thank you!

------
vfrogger
Serious Slow Clap guys. To do this as a web app is really impressive. Great
UI. Only recommendation would be to have a library of prebuilt commonly used
components, similar to balsamiq, but I'm sure you are aware of them.

------
andrepd
I don't think this is a criticism of this app, so much as web developing as a
whole, but it's crazy how this app is hogging one CPU core at 100% to draw a
circle AND still runs at around 15fps.

------
Omnipresent
Amazing app. I haven't explored React much yet. How is the collaboration part
working i.e. changes made in one browser window show up in the another
instantly. Is React being used for this?

------
nazgul1
I like it a lot but it's unusable for me as I need to make things that are
longer than the screen (often much longer), yet this forces me to work within
size of the screen.

~~~
dwwoelfel
You should be able to make things as large as you like--the canvas is
infinite.

To pan, you can scroll or hold space and drag.

To zoom, hold alt and scroll.

~~~
nazgul1
Then it doesn't work properly in Chrome or something-- it's not letting me
drag items to make them bigger than the screen size.

------
cracell
Why can't apps like this have a accessible demo available to try it out? Not
interested enough to spend time signing up and I avoid SSO whenever I can for
various reasons.

~~~
LikeAnElephant
You can click the "Make Something" button on the main page and go directly
into a demo.

------
planetjones
I have a black screen, a blue tooltip saying "Right-click" and nothing
whatsoever happening when I right click.

Firefox 31.5.0

edit: is it really necessary to downvote for reporting a valid bug !?

~~~
dwwoelfel
Sorry about that! We've only tested with Firefox 38. I'll see if I can install
an older version and try to fix whatever bug you're hitting.

In the meantime, I'd be interested if Chrome or Firefox 38 works for you.

~~~
planetjones
hi - i checked the logs. I presume it's the corporate network I'm in blocking
the websocket stuff

WebSocket connection to 'wss://precursorapp.com/chsk?tab-
id=883d69ff-1095-4eed-bf63-83d786d55db1&client-
id=f71e3c9b-fd70-4710-8502-ada0c73f4760' failed: Error during WebSocket
handshake: Unexpected response code: 200

Maybe you could add some better error handling into the GUI ?

~~~
dwwoelfel
Oh no! It's supposed to fall back to long-polling if it can't set up a
WebSocket connection. Thanks for letting us know.

~~~
Trufa
Any news? I still can't use it.

~~~
dwwoelfel
Sorry, I have the ajax fallback mostly working. Sharing cursors doesn't work,
but syncing chat and changes to the canvas does.

I'm still trying to find a reliable way to catch the error that prevents the
connection upgrade. Right now, the library I'm using thinks that it should
just keep retrying the websocket connection. We're already maintaining our own
fork of the library, but it's a tedious process to make and test changes.

------
ciriarte
Looks amazing! I love the responsiveness. Congratulations.

------
patrickaljord
The presentation/intro/design looks amazing. Can't comment on the product
itself as it's not my field of expertise but great job!

------
mako-taco
Beautifully designed, and props to the engineers for keeping everything so
snappy, even with all the animations. Really quality work.

------
randall
I've used this before and really liked it.

------
alexgaribay
Amazing app! The design is very elegant and clean. I love The minimal use of
colors and UI interactions are delightful.

------
bliti
Is it supposed to work on mobile?

~~~
dwwoelfel
It should, although not everything is implemented (most notably delete). Use
2-finger scroll to get around and tap-and-hold to get the tools menu.

~~~
bliti
Ah, I did not think of the 2 finger scroll. Thought it was broken on mobile.
Thank you.

------
hoodoof
Sure looks cool and like looks of coding went into it.

Whether its something that meets a need, dunno.

------
drivingsouth
Love the design / feel

------
mkagenius
Good work!

The pencil tool could be a little more smooth maybe? Like, when making
circles?

------
elwell
Excellent execution. I hope you can find a niche were it pays off.

------
brobdingnagian
This app doesn't render correctly on my chromebook.

~~~
dwwoelfel
Any chance you have a screenshot?

------
pachydermic
This seems really well made, guys. Way to go!

------
inflam52
Love this tool. Clean and easy to use.

------
tacone
It's pretty sluggish on Firefox.

~~~
deltaprotocol
Definitely not on my Firefox. It feels smooth as organic grass-fed butter.

As a beginner web developer aiming to work remotely, they have me. I want
simple, fast, colaborative, and they have it all plus "mindblowingness". ;)

Not only that, sites like this get me excited and make me want to develop
something as good.

I can only congratulate the developers!

~~~
tacone
I'm on Firefox 38.0 on Linux, my laptop is pretty cheap, but on Chromium
everything's super smooth.

Beside that, the app is very slick.

------
ryan-allen
Ah, this is nice, and fast!

------
geniium
Very interesting!

