7 ms·

Show HN: Mockups fixed by making collaboration effortless, built with React

334 points by dwwoelfel 11y ago

Omnipresent 11y ago
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?
1qaz2wsx3edc 11y ago
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 11y ago
  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 11y ago
    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 11y ago
      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.
- deleted 11y ago
  [deleted]
dwwoelfel 11y ago
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 11y ago
  Send them an email...
krat0sprakhar 11y ago
Good work! Looks like its built in Om?
- dwwoelfel 11y ago
  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-javascript-mvcs/ http://swannodette.github.io/2013/12/17/the-future-of-javasc...
  - BFay 11y ago
    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 11y ago
      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 11y ago
        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)
drivingsouth 11y ago
Love the design / feel
robotnoises 11y ago
Very nice looking landing page. On the surface this seems to fill the void left by Easel.
bliti 11y ago
Is it supposed to work on mobile?
- dwwoelfel 11y ago
  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 11y ago
    Ah, I did not think of the 2 finger scroll. Thought it was broken on mobile. Thank you.
ciriarte 11y ago
Looks amazing! I love the responsiveness. Congratulations.
danhardman 11y ago
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 11y ago
  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 11y ago
    Would something like this work? ontouchstart: scrollMultiplier = 10; ontouchend: if(evt.touches.length === 1) scrollMultiplier = 1;
    - dwwoelfel 11y ago
      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-trackpad-zoom http://stackoverflow.com/questions/15416851/catching-mac-tra...
      - TheLoneWolfling 11y ago
        Probably for interoperability for applications that use "standard" ctrl-scroll for zoom. It's a relatively common shortcut.
      - moron4hire 11y ago
        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.
foxpc 11y ago
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 11y ago
  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.
thebouv 11y ago
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.
- Mahn 11y ago
  > 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. Remote teams perhaps? I've never had the need, but I would imagine if you work with designers and engineers remotely live mockups could come handy in a brainstorming session.
  - ryanSrich 11y ago
    I work remotely as a Product Designer. I could see this being useful for exactly what you said. However, I've never had the need for a tool like this. It seems like it is solving a problem that doesn't exist (at least not yet).
  - calinet6 11y ago
    As a member of a totally distributed UX team, yes. We've been looking for just a simple whiteboarding tool that updates live, supports a pen tablet, and lets us collaborate around any rough UI language. We haven't found any that have stuck. This has the potential (haven't used it much yet) to enable us to quickly sketch UX concepts at early stages collaboratively, which is huge. We don't do real mockups that are persistent and used as a base for development anyway—it goes straight from paper sketches to HTML prototype. So this fills a real hole, just rough enough to work together on, just high fidelity enough to make sense to others. Side note, "mockup" is such an ambiguous and relatively irrelevant term for whatever happens at this stage. A mockup here is just whatever you need to visually communicate the UI. The simpler and more malleable the better. If everyone understands the concept and how it translates to a UI in your application framework, then the process was successful.
JoelSutherland 11y ago
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.
malux85 11y ago
Wow this is amazing! Great work guys. It's fluid and beautiful and functional.
planetjones 11y ago
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 11y ago
  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 11y ago
    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 11y ago
      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 11y ago
        Any news? I still can't use it.
        dwwoelfel 11y ago
        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.
pachydermic 11y ago
This seems really well made, guys. Way to go!
mkagenius 11y ago
Good work! The pencil tool could be a little more smooth maybe? Like, when making circles?
brobdingnagian 11y ago
This app doesn't render correctly on my chromebook.
- dwwoelfel 11y ago
  Any chance you have a screenshot?
dbg31415 11y ago
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 11y ago
  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.
artursapek 11y ago
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 :)
Spooks 11y ago
How did you find the process of working with React for this project compared to other js libraries
- mcescalante 11y ago
  I would also love to know what you thought about React since this is a fairly large app when compared to many of the examples commonly given as "this was built with react" (minus FB's products). After looking at the GitHub page for the org, it looks like you're mixing in a bunch of Clojurescript as well, and tying that in, I'd love to hear more about the choices you made when building this and what you thought about the tools. Love the design and the app feels great :)
- dwwoelfel 11y ago
  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 11y ago
    Would you mind expounding a bit as to why the big difference in creating ui was clojurescript? Thank you!
leephillips 11y ago
Apparently this is made with Om (Om makes React available to Clojurescript).
guylepage3 11y ago
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?
alexgaribay 11y ago
Amazing app! The design is very elegant and clean. I love The minimal use of colors and UI interactions are delightful.
inflam52 11y ago
Love this tool. Clean and easy to use.
inflam52 11y ago
Love this tool. Clean and easy to use.
enriquecastl 11y ago
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 11y ago
  Yes, being able to share/upload components for others to use would be stellar.
swannodette 11y ago
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 11y ago
  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
vfrogger 11y ago
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.
patrickaljord 11y ago
The presentation/intro/design looks amazing. Can't comment on the product itself as it's not my field of expertise but great job!
alextgordon 11y ago
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 11y ago
  Good idea, thanks!
tacone 11y ago
It's pretty sluggish on Firefox.
- deltaprotocol 11y ago
  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 11y ago
    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.
randall 11y ago
I've used this before and really liked it.
newobj 11y ago
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.
csel 11y ago
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.
ripberge 11y ago
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 11y ago
  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 11y ago
    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...
- petepete 11y ago
  We've had a lot of success with moqups, it really is so simple that anyone can use it. The commenting is a little clunky but everything else works incredibly well.
ripberge 11y ago
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.
dluan 11y ago
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.
mortenjorck 11y ago
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 11y ago
  Yup, that's why Balsamiq is particularly good for this kind of work.
nazgul1 11y ago
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 11y ago
  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 11y ago
    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.
arihant 11y ago
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.
cracell 11y ago
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 11y ago
  You can click the "Make Something" button on the main page and go directly into a demo.
rainings 11y ago
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.
mako-taco 11y ago
Beautifully designed, and props to the engineers for keeping everything so snappy, even with all the animations. Really quality work.
jondot 11y ago
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 11y ago
  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.
elwell 11y ago
Excellent execution. I hope you can find a niche were it pays off.
geniium 11y ago
Very interesting!
desireco42 11y ago
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.
andrepd 11y ago
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.
ryan-allen 11y ago
Ah, this is nice, and fast!
hoodoof 11y ago
Sure looks cool and like looks of coding went into it. Whether its something that meets a need, dunno.

334 points by dwwoelfel 11y ago

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?

1qaz2wsx3edc 11y ago

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 11y ago
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 11y ago
  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 11y ago
    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.
deleted 11y ago
[deleted]

dwwoelfel 11y ago

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 11y ago
Send them an email...

krat0sprakhar 11y ago

Good work! Looks like its built in Om?

dwwoelfel 11y ago
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-javascript-mvcs/ http://swannodette.github.io/2013/12/17/the-future-of-javasc...
- BFay 11y ago
  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 11y ago
    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 11y ago
      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)

drivingsouth 11y ago

Love the design / feel

robotnoises 11y ago

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

bliti 11y ago

Is it supposed to work on mobile?

dwwoelfel 11y ago
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 11y ago
  Ah, I did not think of the 2 finger scroll. Thought it was broken on mobile. Thank you.

ciriarte 11y ago

Looks amazing! I love the responsiveness. Congratulations.

danhardman 11y ago

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 11y ago
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 11y ago
  Would something like this work? ontouchstart: scrollMultiplier = 10; ontouchend: if(evt.touches.length === 1) scrollMultiplier = 1;
  - dwwoelfel 11y ago
    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-trackpad-zoom http://stackoverflow.com/questions/15416851/catching-mac-tra...
    - TheLoneWolfling 11y ago
      Probably for interoperability for applications that use "standard" ctrl-scroll for zoom. It's a relatively common shortcut.
    - moron4hire 11y ago
      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.

foxpc 11y ago

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 11y ago
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.

thebouv 11y ago

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.

Mahn 11y ago
> 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. Remote teams perhaps? I've never had the need, but I would imagine if you work with designers and engineers remotely live mockups could come handy in a brainstorming session.
- ryanSrich 11y ago
  I work remotely as a Product Designer. I could see this being useful for exactly what you said. However, I've never had the need for a tool like this. It seems like it is solving a problem that doesn't exist (at least not yet).
- calinet6 11y ago
  As a member of a totally distributed UX team, yes. We've been looking for just a simple whiteboarding tool that updates live, supports a pen tablet, and lets us collaborate around any rough UI language. We haven't found any that have stuck. This has the potential (haven't used it much yet) to enable us to quickly sketch UX concepts at early stages collaboratively, which is huge. We don't do real mockups that are persistent and used as a base for development anyway—it goes straight from paper sketches to HTML prototype. So this fills a real hole, just rough enough to work together on, just high fidelity enough to make sense to others. Side note, "mockup" is such an ambiguous and relatively irrelevant term for whatever happens at this stage. A mockup here is just whatever you need to visually communicate the UI. The simpler and more malleable the better. If everyone understands the concept and how it translates to a UI in your application framework, then the process was successful.

JoelSutherland 11y ago

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.

malux85 11y ago

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

planetjones 11y ago

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 11y ago
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 11y ago
  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 11y ago
    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 11y ago
      Any news? I still can't use it.
      - dwwoelfel 11y ago
        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.

pachydermic 11y ago

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

mkagenius 11y ago

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

brobdingnagian 11y ago

This app doesn't render correctly on my chromebook.

dwwoelfel 11y ago
Any chance you have a screenshot?

dbg31415 11y ago

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 11y ago
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.

artursapek 11y ago

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 :)

Spooks 11y ago

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

mcescalante 11y ago
I would also love to know what you thought about React since this is a fairly large app when compared to many of the examples commonly given as "this was built with react" (minus FB's products). After looking at the GitHub page for the org, it looks like you're mixing in a bunch of Clojurescript as well, and tying that in, I'd love to hear more about the choices you made when building this and what you thought about the tools. Love the design and the app feels great :)
dwwoelfel 11y ago
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 11y ago
  Would you mind expounding a bit as to why the big difference in creating ui was clojurescript? Thank you!

leephillips 11y ago

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

guylepage3 11y ago

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?

alexgaribay 11y ago

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

inflam52 11y ago

Love this tool. Clean and easy to use.

inflam52 11y ago

Love this tool. Clean and easy to use.

enriquecastl 11y ago

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 11y ago
Yes, being able to share/upload components for others to use would be stellar.

swannodette 11y ago

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 11y ago
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

vfrogger 11y ago

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.

patrickaljord 11y ago

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

alextgordon 11y ago

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 11y ago
Good idea, thanks!

tacone 11y ago

It's pretty sluggish on Firefox.

deltaprotocol 11y ago
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 11y ago
  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.

randall 11y ago

I've used this before and really liked it.

newobj 11y ago

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.

csel 11y ago

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.

ripberge 11y ago

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 11y ago
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 11y ago
  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...
petepete 11y ago
We've had a lot of success with moqups, it really is so simple that anyone can use it. The commenting is a little clunky but everything else works incredibly well.

ripberge 11y ago

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.

dluan 11y ago

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.

mortenjorck 11y ago

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 11y ago
Yup, that's why Balsamiq is particularly good for this kind of work.

nazgul1 11y ago

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 11y ago
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 11y ago
  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.

arihant 11y ago

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.

cracell 11y ago

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 11y ago
You can click the "Make Something" button on the main page and go directly into a demo.

rainings 11y ago

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.

mako-taco 11y ago

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

jondot 11y ago

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 11y ago
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.

elwell 11y ago

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

geniium 11y ago

Very interesting!

desireco42 11y ago

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.

andrepd 11y ago

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.

ryan-allen 11y ago

Ah, this is nice, and fast!

hoodoof 11y ago

Sure looks cool and like looks of coding went into it. Whether its something that meets a need, dunno.