7 ms·

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

90 points by senex 16y ago

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

maxtilford 16y ago
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 16y ago
nicely done! passing this on to my ui/uix friends right now.
bdr 16y ago
How do you deal with the screen resolution problem?
- senex 16y ago
  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 http://markup.io/v/x9ybmz4e5k7r
  - bdr 16y ago
    That's a good solution. Thanks.
jasonkester 16y ago
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 16y ago
  I love twiddla. Fwiw, it runs circles around this.
singer 16y ago
Do you have any plans to support IE8?
- senex 16y ago
  Definitely. IE7+ support is on the way.
mmmmax 16y ago
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 16y ago
  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 16y ago
    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 16y ago
Good idea. We can use this for design dev. Bookmarked.
jeffepp 16y ago
Whoaa. This is excellent. Thanks!
josiahq 16y ago
The mischief quotient for this is rather high
jeffepp 16y ago
clickable: http://markup.io http://markup.io
jnoller 16y ago
This is pretty awesome, I might be using it a lot!
ccc3 16y ago
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 16y ago
  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 16y ago
  I also have a similar problem, and I'm using Safari 5.0.2.
sv123 16y ago
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 16y ago
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 16y ago
  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 16y ago
    Aha. Had no idea there was a text tool -- since it's not in the frontpage demo.
3pt14159 16y ago
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 16y ago
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 16y ago
  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 16y ago
    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 16y ago
  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.
Keyframe 16y ago
This is awesome. I usually use Awesome screenshot for Chrome - https://chrome.google.com/extensions/detail/alelhddbbhepgpmgidjdcjakblofbmce https://chrome.google.com/extensions/detail/alelhddbbhepgpmg... and Lightshot for OS screenshots straight out of Chrome - but usually I only annotate images and not web pages, respond feature is really nice to have also.
lotusleaf1987 16y ago
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 16y ago
[deleted]
thesystemis 16y ago
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 http://imgur.com/baqxi the lines to the left side we'ren't drawn by me.
- carbocation 16y ago
  I confirm this problem on Chrome dev 7.0.544.0 on Win 7.
shushan 16y ago
What happens if the page gets updated?
- josiahq 16y ago
  The page is cached out, so after publish the shapes aren't being laid on top of the original site.
klochner 16y ago
what about this one? http://drawhere.com/site/www.yahoo.com/ http://drawhere.com/site/www.yahoo.com/
- ojilles 16y ago
  Doesn't support Chrome
  - klochner 16y ago
    good point - browser compatibility is kinda important if it's meant as a sharing tool.
- nwah 16y ago
  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 16y ago
Awesome utility/bookmarklet. I've noticed some slowness but it may be my side due to applicaitons and tabs open. But awesome..
IsaacSchlueter 16y ago
http://dev.markup.io/v/fz1jwz3xv8nz http://dev.markup.io/v/fz1jwz3xv8nz
blahed 16y ago
:)
astroguy 16y ago
Great tool!
0xFF 16y ago
Seems to have a bug - on Mac/FF, I generally get the free-form no matter which tool I click on, although at one point I got the circle when the free-form tool was highlighted, and every once in a while I do get the arrow to work correctly - didn't figure out the pattern.
nwah 16y ago
Full list of (currently undocumented) keyboard shortcuts: Note: On Mac, substitute any ctrl with cmd general: ctrl+z: undo ctrl+shift+z: redo ctrl+s: save (open publish dialog) ctrl+i or i: open info window alt+r: open reply dialog (on a published markup) tools: v or s: select tool a: arrow m: marker t: text l: line c or e: circle (ellipse) r: rectangle esc or ctrl+enter: finish editing a textbox editing: backspace or delete: delete selected shape(s) ctrl+a: select all arrow keys: nudge selected shape(s) shift+arrows: nudge selected by 10 pixels
aiurtourist 16y ago
Reforma Grotesk -- nice font! http://new.myfonts.com/fonts/paratype/reforma-grotesk-bold-e/reforma-grotesk-medium/ http://new.myfonts.com/fonts/paratype/reforma-grotesk-bold-e...
pseudonym 16y ago
On Firefox 3.6.10/Win7, I get this: http://i.imgur.com/cNt7g.png http://i.imgur.com/cNt7g.png Each number was drawn individually as shown. Each number took longer before showing up on the page, to the point where 4 and 5 tossed up the Firefox "unresponsive script" dialog. Apart from that, this definitely has potential, and would actually give me a reason to un-mothball my tablet notebook. Props!
zwieback 16y ago
Fun. Is there a central place where I can search for web pages marked up with this tool?
- senex 16y ago
  Not yet, but we we're toying with the idea of adding a real-time stats/zeitgeist page. Stay tuned to @MarkupIO on twitter for updates.
peterbessman 16y ago
Strong work.
victorp 16y ago
Great job. Who did the design for your page?
- senex 16y ago
  M.A. Turner did the design. He works at Medium (http://thisismedium.com/ http://thisismedium.com/) with us. Usually we work for clients, but we've started some projects of our own like MarkUp.
volida 16y ago
this looks quite helpful, works on Chrome, but not on IE9 when I used the published url
davidedicillo 16y ago
This is a great tool, I actually thought about something like this last year to share feedbacks on websites, but never got around to develop it. Bookmarked it, and I'll definitely use it.

90 points by senex 16y ago

maxtilford 16y ago

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

nicely done! passing this on to my ui/uix friends right now.

bdr 16y ago

How do you deal with the screen resolution problem?

senex 16y ago
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 http://markup.io/v/x9ybmz4e5k7r
- bdr 16y ago
  That's a good solution. Thanks.

jasonkester 16y ago

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 16y ago
I love twiddla. Fwiw, it runs circles around this.

singer 16y ago

Do you have any plans to support IE8?

senex 16y ago
Definitely. IE7+ support is on the way.

mmmmax 16y ago

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

Good idea. We can use this for design dev. Bookmarked.

jeffepp 16y ago

Whoaa. This is excellent. Thanks!

josiahq 16y ago

The mischief quotient for this is rather high

jeffepp 16y ago

clickable: http://markup.io http://markup.io

jnoller 16y ago

This is pretty awesome, I might be using it a lot!

ccc3 16y ago

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 16y ago
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 16y ago
I also have a similar problem, and I'm using Safari 5.0.2.

sv123 16y ago

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

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 16y ago
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 16y ago
  Aha. Had no idea there was a text tool -- since it's not in the frontpage demo.

3pt14159 16y ago

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

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

Keyframe 16y ago

This is awesome. I usually use Awesome screenshot for Chrome - https://chrome.google.com/extensions/detail/alelhddbbhepgpmgidjdcjakblofbmce https://chrome.google.com/extensions/detail/alelhddbbhepgpmg... and Lightshot for OS screenshots straight out of Chrome - but usually I only annotate images and not web pages, respond feature is really nice to have also.

lotusleaf1987 16y ago

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

[deleted]

thesystemis 16y ago

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 http://imgur.com/baqxi the lines to the left side we'ren't drawn by me.

carbocation 16y ago
I confirm this problem on Chrome dev 7.0.544.0 on Win 7.

shushan 16y ago

What happens if the page gets updated?

josiahq 16y ago
The page is cached out, so after publish the shapes aren't being laid on top of the original site.

klochner 16y ago

what about this one? http://drawhere.com/site/www.yahoo.com/ http://drawhere.com/site/www.yahoo.com/

ojilles 16y ago
Doesn't support Chrome
- klochner 16y ago
  good point - browser compatibility is kinda important if it's meant as a sharing tool.
nwah 16y ago
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 16y ago

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

IsaacSchlueter 16y ago

http://dev.markup.io/v/fz1jwz3xv8nz http://dev.markup.io/v/fz1jwz3xv8nz

blahed 16y ago

astroguy 16y ago

Great tool!

0xFF 16y ago

Seems to have a bug - on Mac/FF, I generally get the free-form no matter which tool I click on, although at one point I got the circle when the free-form tool was highlighted, and every once in a while I do get the arrow to work correctly - didn't figure out the pattern.

nwah 16y ago

Full list of (currently undocumented) keyboard shortcuts: Note: On Mac, substitute any ctrl with cmd general: ctrl+z: undo ctrl+shift+z: redo ctrl+s: save (open publish dialog) ctrl+i or i: open info window alt+r: open reply dialog (on a published markup) tools: v or s: select tool a: arrow m: marker t: text l: line c or e: circle (ellipse) r: rectangle esc or ctrl+enter: finish editing a textbox editing: backspace or delete: delete selected shape(s) ctrl+a: select all arrow keys: nudge selected shape(s) shift+arrows: nudge selected by 10 pixels

aiurtourist 16y ago

Reforma Grotesk -- nice font! http://new.myfonts.com/fonts/paratype/reforma-grotesk-bold-e/reforma-grotesk-medium/ http://new.myfonts.com/fonts/paratype/reforma-grotesk-bold-e...

pseudonym 16y ago

On Firefox 3.6.10/Win7, I get this: http://i.imgur.com/cNt7g.png http://i.imgur.com/cNt7g.png Each number was drawn individually as shown. Each number took longer before showing up on the page, to the point where 4 and 5 tossed up the Firefox "unresponsive script" dialog. Apart from that, this definitely has potential, and would actually give me a reason to un-mothball my tablet notebook. Props!

zwieback 16y ago

Fun. Is there a central place where I can search for web pages marked up with this tool?

senex 16y ago
Not yet, but we we're toying with the idea of adding a real-time stats/zeitgeist page. Stay tuned to @MarkupIO on twitter for updates.

peterbessman 16y ago

Strong work.

victorp 16y ago

Great job. Who did the design for your page?

senex 16y ago
M.A. Turner did the design. He works at Medium (http://thisismedium.com/ http://thisismedium.com/) with us. Usually we work for clients, but we've started some projects of our own like MarkUp.

volida 16y ago

this looks quite helpful, works on Chrome, but not on IE9 when I used the published url

davidedicillo 16y ago

This is a great tool, I actually thought about something like this last year to share feedbacks on websites, but never got around to develop it. Bookmarked it, and I'll definitely use it.