HN Explorer

Show HN: Review my project: MarkUp, a tool to draw on any webpage.

90 points by senex ↗ HN
Here's the website: http://markup.io/

We created MarkUp at Medium to help make the QA process better for sites we're working on. Grab the MarkUp bookmarklet, go to some page in your browser, then click it to draw on the page. Publish to make a link you can share.

We've tried similar tools like BounceApp, Notable, and Skitch. Everything else we found is screenshot-based or takes us out of the browser. We wanted something that felt quicker than screenshots and more integrated with the browsing experience.

Instead of taking a screenshot, MarkUp snapshots the DOM in the current page, strips the javascript, and overlays a transparent DIV to draw on. We used Raphael for the drawing tools. The server-side is Node.js/Express.

What do you think? It's in beta and we'll be adding more features, but we wanted to start getting feedback now.

Thanks

55 comments

[ 5.7 ms ] story [ 168 ms ] thread
maxtilford
Very nice. That's a tool I was just about to need. My circles and rectangles are a bit sloppy... Scratch that, I found the toolbox. Awesome.
smoody
nicely done! passing this on to my ui/uix friends right now.
bdr
How do you deal with the screen resolution problem?
senex
We capture the dimensions of the page when the toolbar loads. People viewing the MarkUp with different screen resolutions might see an "empty" background or need to scroll a bit.

Here's an example: http://markup.io/v/x9ybmz4e5k7r

bdr
That's a good solution. Thanks.
jasonkester
Cool. That (drawing on an existing web page to mark it up) is the same use-case we had that led to building Twiddla. It's pretty much the same thing, but realtime & multi-user.

Good luck!

photon_off
I love twiddla. Fwiw, it runs circles around this.
singer
Do you have any plans to support IE8?
senex
Definitely. IE7+ support is on the way.
mmmmax
I like this a lot, and for quick notes it's easier than Notable. I like the implementation as a bookmarklet, but here are two big problems:

1) Starting MarkUp clears any info you've entered into a form on the page 2) There is no easy way to exit/cancel (how about trapping ESC or adding a little X?)

senex
Thanks for the feedback! I've added (1) to our bug list. Others have asked for (2), so we'll definitely be adding that sometime soon.
proexploit
Obviously you've already added it to your list, but just for feedback, this is the biggest thing I'm missing right now too (no cancel or close). The history is amazing and I'm not sure if you've got a limit on it but I did undo roughly 30 times easily. You may want to also consider an undo button for people who don't think to try Ctrl-Z or just some info on possible commands on the info button. Do you support any other keyboard shortcuts (switching tools, size up or down etc?)
markkat
Good idea. We can use this for design dev. Bookmarked.
jeffepp
Whoaa. This is excellent. Thanks!
josiahq
The mischief quotient for this is rather high
jnoller
This is pretty awesome, I might be using it a lot!
ccc3
Very nice work!

I'm seeing a bug in the drawing demo on the front page. I can draw the first line and it works as expected, but if I release the mouse and try to draw a second line it's not working correctly. It doesn't show the shape that I've drawn until I release the mouse and it connects the end of the first line to the start of the second.

headsclouds
This is definitely the case for me too (Using Chrome on OS X). You can sort of fix it by right clicking and then restarting, but it works exactly as expected on other websites. Good job OP.
hassaanm
I also have a similar problem, and I'm using Safari 5.0.2.
sv123
This is awesome. We use diigo right now for tagging pages and sharing them but it is pretty weak. The ability to login & keep a history of your markups to share with others in your group would be tops.
gojomo
Nice. Some ideas (that you probably already have): typable sticky notes; a library of icons/images to overlay; audio notes; have some gestures (double-click like an iOS double-tap?) auto-select containing DOM elements.
nwah
You can get something pretty sticky-note-ish by dragging a box with the text tool. And yep, we've got some of those on our list.
gojomo
Aha. Had no idea there was a text tool -- since it's not in the frontpage demo.
3pt14159
This is amazing the tool itself is intuitive and easy to use, but powerful. The only thing I would say needs a bit of work is your website. Declutter it, and make it more like dropbox.com, where the user has no other choice but to try it (rather than read about it).
desigooner
Great work. Bookmarked it.

2 questions:

1) Is there a way to erase or reset the drawing in case i bungle it up?

2) It'd be brilliant if you could collaborate using the same URL. I sent a markup URL to someone who wanted to share his notes on my annotations and he hit respond, drew the appropriate stuff and hit publish only to find that there was a new link that had to be pushed to me for it to be seen. Again, I understand the concern of too many cooks spoil the broth but it's a usecase for a small team to collaborate on a page's UI without having to send a new link each time.

nwah
1) Yep. Keyboard only for now (though we're looking into adding UI controls): You can select any shape, then hit backspace/delete. You can also select every shape with ctrl+a/cmd+a. Also ctrl+z/cmd+z and ctrl+shift+z/cmd+shift+z to go back and forth in the history.

2) We've got some ideas about making collaborating easier (revision history, realtime multi-user drawing, wave-style replaying, &c.) What would work well for you?

desigooner
Thanks for the followup.

re. #2, i think even a revision history, keeping the same URL or a list of revisions on the dropdown should be very useful while you develop the entire product.

alexdong
Great piece of work.

What about using socket.io to provide a real-time collaborative environment?

Here is the typical use case: my business partner is in Australia and I'm in China. We often browse the internet "together" to share some design inspirations. For now, we have to include position info in the skype call to say "if you look at the trending keywords on the right hand side, blah, blah". It'll be super nice for us to look at the same page and I can see his mouse movement.

lotusleaf1987
It's pretty similar to Coda Notes, but Markup seems to be much more professional. Also, Coda Notes is only for Safari, so that's one disadvantage they have.
[deleted]
(comment deleted)
thesystemis
cool idea. just wanted to point out that drawing (with the circle) is a bit buggy on mac chrome 6.0.472.63. I've posted a screenshot of me writing the word "hack" here:

http://imgur.com/baqxi

the lines to the left side we'ren't drawn by me.

carbocation
I confirm this problem on Chrome dev 7.0.544.0 on Win 7.
shushan
What happens if the page gets updated?
josiahq
The page is cached out, so after publish the shapes aren't being laid on top of the original site.
klochner
what about this one?

http://drawhere.com/site/www.yahoo.com/

ojilles
Doesn't support Chrome
klochner
good point - browser compatibility is kinda important if it's meant as a sharing tool.
nwah
Pretty nice, and it's similar. But, no text tools, and no Safari/Chrome support. Also, MarkUp captures the DOM exactly as it is (including stuff loaded in through AJAX), and kills any javascript.
PatHyatt
Awesome utility/bookmarklet.

I've noticed some slowness but it may be my side due to applicaitons and tabs open. But awesome..