Ask HN: Is there a tool / product that enables commenting on HTML elements?
60 comments
When my cofounder Irtefa and I were PMs at Cloudflare we actually searched for a tool like this and when we couldn’t find one we liked, we went out to build it ourselves.
Our first attempt was a product that let product teams leave feedback as annotations tied to DOM elements, but what we learned is that product teams have a hard time trusting those comments as the underlying DOM does change (screen & viewport size, os/browser, geo/language, recent deploys, logged in account).
From there we went on to build Jam (https://jam.dev) - letting people quickly comment on what they see in the DOM and send a perfect snapshot with way more context than a screenshot (with even console logs and network requests attached) to a link to share or even a Jira ticket.
If you give it a try, I hope you find it’s much faster than screenshots and feedback the old way (we used to do feedback in a spreadsheet as PMs ), and would love to hear what you think! :)
Our first attempt was a product that let product teams leave feedback as annotations tied to DOM elements, but what we learned is that product teams have a hard time trusting those comments as the underlying DOM does change (screen & viewport size, os/browser, geo/language, recent deploys, logged in account).
From there we went on to build Jam (https://jam.dev) - letting people quickly comment on what they see in the DOM and send a perfect snapshot with way more context than a screenshot (with even console logs and network requests attached) to a link to share or even a Jira ticket.
If you give it a try, I hope you find it’s much faster than screenshots and feedback the old way (we used to do feedback in a spreadsheet as PMs ), and would love to hear what you think! :)
Unfortunately I don't think it's ready yet for serious work. Just so many bugs in the product and didn't feel right for an organization. Felt more like a toy app.
Bugherd is good for this. Used it extensively when I worked for a web agency and it saved so much time.
https://bugherd.com/
https://bugherd.com/
We're using bugherd too, works fine but it's not very ergonomic for 50+ projects. So we made something to display unassigned issues, all issues by last comment date (if it's not a comment from our team), last issues created, and last issues created for each of my colleagues and me.
Yeah it's great for a web agency as clients just "get it".
Yes. Only one solving the problem very very well right now.
Memex - https://getmemex.com
More generally the open annotations standard is meant to address this use case, but it's been stagnant for a while. Older, now obselete tools like hypothes.is, and peerlibrary* laid a lot of the groundwork. Memex has really carried it for the last few years and their implementation is remarkably robust.
https://github.com/peerlibrary/peerlibrary
Memex - https://getmemex.com
More generally the open annotations standard is meant to address this use case, but it's been stagnant for a while. Older, now obselete tools like hypothes.is, and peerlibrary* laid a lot of the groundwork. Memex has really carried it for the last few years and their implementation is remarkably robust.
https://github.com/peerlibrary/peerlibrary
How is hypothes.is obsolete? They're focusing on education, but it works well for every personal and small-group commenting use-case. It's open source and there are community integrations for basically everything.
Native support for web annotations should also land in Chromium this year.
Native support for web annotations should also land in Chromium this year.
What if the element moves or is replaced in the next design iteration ? I’m not sure you want to be merging and splitting tickets on individual DOM elements to keep the comment history sane..
Though I would be interested in tooling that allows clients to simply create issues by clicking an element and then saving full context (dom, screenshot, url, form state, browser and session) with that issue. Something important is too often missing from a bug report.
But then the problem is getting the client to actually use that tool.
Though I would be interested in tooling that allows clients to simply create issues by clicking an element and then saving full context (dom, screenshot, url, form state, browser and session) with that issue. Something important is too often missing from a bug report.
But then the problem is getting the client to actually use that tool.
Most of the good tools like that do capture the context like that, while still making it easy for the end user. Even just a paragraph plus a screenshot plus the url plus the console is a great start, and that's all easy to capture automatically but hard to get from users manually.
Then there is a pipeline from that into your issue manager. I've sent them into jira, Airtable, etc. for further refinement and work.
Then there is a pipeline from that into your issue manager. I've sent them into jira, Airtable, etc. for further refinement and work.
Yes, you're describing some of the problems addressed by the open annotations standard and the tooling in that ecosystem.
Ybug.io is the best I've found for this purpose. The only thing it doesn't do is collect the DOM element information. The user can choose to send a report with a full-screen screenshot or annotate a part of it.
It also sends console errors if you want it to.
It also sends console errors if you want it to.
If you have concerns about UX I'd have thought you should be commenting at the design level rather than leaving it until things have got to the stage where they've been developed to the point where there's HTML to talk about.
In my experience, this doesn’t work. It’s always in everyone’s “In a perfect world” plans, but no one ever seems to have much to say, in the beginning.
Even technically-proficient major stakeholders (for example, managers and testers) seldom offer much in the way of feedback, early in the project.
I have learned to write my applications in a manner that affords “hands-on” testing, as early as possible, and I use techniques that allow a lot of pivoting.
I wrote the following comment, in an earlier thread[0] where I discuss this approach.
[0] https://news.ycombinator.com/item?id=32153234
Even technically-proficient major stakeholders (for example, managers and testers) seldom offer much in the way of feedback, early in the project.
I have learned to write my applications in a manner that affords “hands-on” testing, as early as possible, and I use techniques that allow a lot of pivoting.
I wrote the following comment, in an earlier thread[0] where I discuss this approach.
[0] https://news.ycombinator.com/item?id=32153234
I have learned to write my applications in a manner that affords “hands-on” testing, as early as possible
I think we agree in principle. I prefer using design tools that offer 'interactive' previews like Figma, but the idea is the same - get feedback from stakeholders as early as possible.
I think we agree in principle. I prefer using design tools that offer 'interactive' previews like Figma, but the idea is the same - get feedback from stakeholders as early as possible.
The "U" part is hard to talk about without actual users using it though. Which is hard to do pre-html.
Nobody really knows this stuff. If you're at huge companies, you have the luxury of having several rounds of UX testing. But it's still largely trial and error.
At smaller outfits you just have ramshackle processes that sometimes include user feedback, sometimes not. The stakeholders rarely know all the applicable personas and journeys and such right off the bat, especially for greenfield features...
Not disagreeing with you, since that would be really nice, just never really seen it in practice. Every org I've ever worked for had made UX a low priority.
At smaller outfits you just have ramshackle processes that sometimes include user feedback, sometimes not. The stakeholders rarely know all the applicable personas and journeys and such right off the bat, especially for greenfield features...
Not disagreeing with you, since that would be really nice, just never really seen it in practice. Every org I've ever worked for had made UX a low priority.
Came here to recommend hypothesis. It's used in academia/research, and you can add as a widget to your site too.
Hypothesis/h is a (Pyramid) web app with a JS widget that can be added to the HTML of a page manually or by the Hypothesis browser extension, which enables you to also comment on PDFs, WAVs, GIFs:
https://github.com/hypothesis/h
From the W3C Web Annotation spec that Hypothesis implements https://www.w3.org/TR/annotation-model/ :
> Selectors: Fragment Selector, CSS Selector, XPath Selector, Text Quote Selector, Text Position Selector, Data Position Selector, SVG Selector, Range Selector, Refinement of Selection
> States: Time State, Request Header State, Refinement of State
From the W3C Web Annotation spec that Hypothesis implements https://www.w3.org/TR/annotation-model/ :
> Selectors: Fragment Selector, CSS Selector, XPath Selector, Text Quote Selector, Text Position Selector, Data Position Selector, SVG Selector, Range Selector, Refinement of Selection
> States: Time State, Request Header State, Refinement of State
I've actually seen folks post a wiki-style list here of tools in the spirit of your request.
The key thing your post is missing is that the word you're looking for is "annotations".
https://hn.algolia.com/?q=annotations https://news.ycombinator.com/item?id=22876408
Going back to some of these old posts makes me highly nostalgic for a specific era of the web when we had no reason to expect that we wouldn't always be using bookmarklets to get shit done, Facebook Open Graph was a Thing and there was an assumption that everything would soon be connected like modules using Yahoo Pipes. https://web.archive.org/web/20120320063943/http://nimblecode... https://web.archive.org/web/20120211054910/http://www.readwr...
The key thing your post is missing is that the word you're looking for is "annotations".
https://hn.algolia.com/?q=annotations https://news.ycombinator.com/item?id=22876408
Going back to some of these old posts makes me highly nostalgic for a specific era of the web when we had no reason to expect that we wouldn't always be using bookmarklets to get shit done, Facebook Open Graph was a Thing and there was an assumption that everything would soon be connected like modules using Yahoo Pipes. https://web.archive.org/web/20120320063943/http://nimblecode... https://web.archive.org/web/20120211054910/http://www.readwr...
https://usersnap.com/ could be an option. - doesn't have comments on HTML elements but does allow users/stakeholders to draw on the screen and submit reports of what they've drawn e.g. if something looks wrong.
Check out Livecycle (https://livecycle.io/). I'm part of the team there and it sounds like it could be the tool you're looking for, since our aim is to make the review process more organized, clear and collaborative for front-end teams.
The platform lets teams collaborate on top of PR preview environments where all relevant stakeholders can comment with text, screenshots, video captures, and by easily editing HTML/CSS elements, as you mentioned you wanted to do.
All review comments are organized in the Livecycle playground (with relevant notifications for playground collaborators) and also synced back to Git where developers can see them in full context.
So using Livecycle, your team will be able to clearly collect UI/UX feedback from everyone, and avoid unnecessary tickets and emails. The whole process becomes transparent and collaborative (for both technical and non-technical stakeholders).
It takes just a few minutes to set up, and at no cost. We're available and happy to help and answer any questions and also to tell you about our upcoming rollout of an SDK...
The platform lets teams collaborate on top of PR preview environments where all relevant stakeholders can comment with text, screenshots, video captures, and by easily editing HTML/CSS elements, as you mentioned you wanted to do.
All review comments are organized in the Livecycle playground (with relevant notifications for playground collaborators) and also synced back to Git where developers can see them in full context.
So using Livecycle, your team will be able to clearly collect UI/UX feedback from everyone, and avoid unnecessary tickets and emails. The whole process becomes transparent and collaborative (for both technical and non-technical stakeholders).
It takes just a few minutes to set up, and at no cost. We're available and happy to help and answer any questions and also to tell you about our upcoming rollout of an SDK...
How do you make money?
Here's an idea that might work if your org is doing github issues (or some other git host with similar feature).
Let's assume you have backend code spitting out the frontend code which still needs to be loaded as a page in a browser to let javascript do its thing before you have the actual DOM you want to inspect and comment on. If the backend is producing your HTML fully formed -- not bootstrapped further using javascript that is -- then you might be able to get away with telling your backend to produce a static version of your site, check that into git, and then people can comment on the individual lines on github by clicking the line numbers to reference that line in a new issue.
Our QA team uses https://birdeatsbug.com for testing and reporting bugs internally. Think it's similar to jam.dev that others have suggested.
I built https://www.kontxt.io for this. You can @mention in comments to send emails with deep-links like this:
https://www.kontxt.io/demo.html?kontxt_context_id=tJQebzVav-...
There's also google-doc like sharing controls. And it's connected to a CMS with folders and groups so it's easy to stay organized and up to date.
https://www.kontxt.io/demo.html?kontxt_context_id=tJQebzVav-...
There's also google-doc like sharing controls. And it's connected to a CMS with folders and groups so it's easy to stay organized and up to date.
https://app.punchlist.com does exactly this.
For full transparency, I work at Punchlist.
For full transparency, I work at Punchlist.
Yes, we used Pastel https://usepastel.com and it was very nice overall.
+1 … I used Pastel on a web project with multiple non-technical stakeholder writing comments on design and texts. Worked great. It also saves screenshots of the annotated area, so no confusion if the HTML changed. Absolutely recommend
I cofounded FeaturePeek, where we built a tool to solve this problem. It syncs comments and screenshots to the GitHub/GitLab pull request, so teammates can leave feedback during the development cycle, when devs prefer. We were acquired by Netlify in 2021, and now it’s built in to their Deploy Previews product, available on every pricing tier.
Have a look at https://www.markup.io/
SingleFile [1] includes a simple annotation editor that allows you to highlight text and add notes in saved pages.
[1] https://github.com/gildas-lormeau/SingleFile/
[1] https://github.com/gildas-lormeau/SingleFile/
https://www.usebubbles.com for comments in a video+screencast
Or, in Chrome with the dev tools open, hit:
Command + Shift + P
Then type: Capture full size screenshot
Then you can use Previewer, PowerPoint, or any graphic design program to comment on the PNG
Or, in Chrome with the dev tools open, hit:
Command + Shift + P
Then type: Capture full size screenshot
Then you can use Previewer, PowerPoint, or any graphic design program to comment on the PNG
Are the webpages you're primarily annotating, articles? If so, then I built Smort.io for this. To annotate and share articles easily.
Here is a demo: https://smort.io/demo/home
Here is a demo: https://smort.io/demo/home
I built conoteapp.com, it's designed for highlighting text and adding comments rather than specific HTML elements but it fits the bill for being shareable as you don't need to download anything.
Drop me a message if you want any help!
Drop me a message if you want any help!
This looks so close to what I am looking for, however I wonder if you have the one feature that I would like: rather than highlighting text in a page, I would like the ability to inject an icon that a user clicks in order to get a pop-up help message.
The intent of this is to write custom user help to inject into incomprehensible Enterprise application user interfaces.
I could get by with highlighting text of course, but I think it would be more attractive to have an icon as highlights all over the place would be a bit ugly.
Thoughts? (You, or anyone who know a way to accomplish this?)
Also, are you paid or free, and what are the odds of this still being a product 5 years from now?
The intent of this is to write custom user help to inject into incomprehensible Enterprise application user interfaces.
I could get by with highlighting text of course, but I think it would be more attractive to have an icon as highlights all over the place would be a bit ugly.
Thoughts? (You, or anyone who know a way to accomplish this?)
Also, are you paid or free, and what are the odds of this still being a product 5 years from now?
Great news. I have been thinking of various ways to make the paid plan more attractive to people and was looking at interactive elements like tooltips and buttons as a potential differentiator.
How much would you be willing to pay to add tooltips and buttons for your use case?
The app is free forever with a paid tier that adds some functionality but I'm mostly focusing on user aquisition with the free tier at the moment. I'd say the likelihood of the project being around in 5 years is high as it costs me very little to run and I'm happy to run it at a loss as a public good.
Thanks for your feedback.
How much would you be willing to pay to add tooltips and buttons for your use case?
The app is free forever with a paid tier that adds some functionality but I'm mostly focusing on user aquisition with the free tier at the moment. I'd say the likelihood of the project being around in 5 years is high as it costs me very little to run and I'm happy to run it at a loss as a public good.
Thanks for your feedback.
> The app is free forever with a paid tier that adds some functionality but I'm mostly focusing on user aquisition with the free tier at the moment. I'd say the likelihood of the project being around in 5 years is high as it costs me very little to run and I'm happy to run it at a loss as a public good.
Well, that's kinda the bad thing...I'd gladly pay $5/month or whatever because I use this crap software every day, but trying to sell this to clients (what's this, this multi-million software we just bought now also needs an extra $5/user to get actually useful context-sensitive help!!!??) would be "a bad look".
Alternatively, perhaps my employer could buy a perpetual license per client or something and bundle it in, except they give 0 shits about customer satisfaction (it is the norm in the industry).
Realistically, someone who had the slightest clue about javascript (not me!) could probably figure out how to write a few lines of javascript to inject all this according to a single configuration file somewhere, but in the meantime (likely forever) I'd love to find some tool that can do it.
Well, that's kinda the bad thing...I'd gladly pay $5/month or whatever because I use this crap software every day, but trying to sell this to clients (what's this, this multi-million software we just bought now also needs an extra $5/user to get actually useful context-sensitive help!!!??) would be "a bad look".
Alternatively, perhaps my employer could buy a perpetual license per client or something and bundle it in, except they give 0 shits about customer satisfaction (it is the norm in the industry).
Realistically, someone who had the slightest clue about javascript (not me!) could probably figure out how to write a few lines of javascript to inject all this according to a single configuration file somewhere, but in the meantime (likely forever) I'd love to find some tool that can do it.
Does Genius Web Annotator still work? I used it years ago and found it pretty handy: https://genius.com/web-annotator
That's been shut down since this May according to wikipedia.
I've built conoteapp.com in a similar spirit.
I've built conoteapp.com in a similar spirit.
PixelSnap - https://getpixelsnap.com/.
It might not be exactly what you asked for, but it might solve your problem in an alternative way.
It might not be exactly what you asked for, but it might solve your problem in an alternative way.
I think https://jam.dev should help, it was built by a few ex pms to solve this gap
Checkout ZipBoard. They have pioneered this.
https://zipboard.co/
Thank you for the mention.We built zipBoard with the idea of making it easy to share all that design feedback and converting them to issues and tickets.
We capture all the information and tag comments to the DOM element -screenshot, url, browser and session) with that issue.
Another thing that we do well is ability to even capture small videos, if there is more interaction.
Plus the ability to manage issues for different environments in the same project, staging, dev, live.
Also annotations with Cactus Comments https://cactus.chat (based on Matrix).
https://quotebacks.net/ are popular among the IndieWebsters.
I think https://jam.dev/ should do it!
(not affiliated - just a fan)
(not affiliated - just a fan)
Second jam.dev - it’s zippy!
the founders are really responsive to any feedback so add it in the extension store or tweet them @jamdotdev
the founders are really responsive to any feedback so add it in the extension store or tweet them @jamdotdev
Tried it, really bad. Don't recommend.
Details?
Just so many bugs in the product and didn't feel right for an organization. Felt more like a toy app.
I've been thinking about creating something like this. Essentially comments ON code that aren't IN the code
I built this a few years ago, but I have no idea if it still works: https://getvox.co/
Snippyly
How is this your biggest problem?
Emailing an annotated screenshot or attaching to a JIRA seems better because it's more consistent and blends with other processes. What should happen when webpages content changes or goes defunct? Now you're also creating an archive.org... and on and on.
Don't get stuck and sink your time into a local maxima.
Maybe you'll find a market [of fools] willing to invest time into this exact locally optimal solution, but I predict it will be disappointingly small. The problem it solves isn't broadly substantial enough to warrant a specialized solution.
Only one way to know for sure, though ;)
Emailing an annotated screenshot or attaching to a JIRA seems better because it's more consistent and blends with other processes. What should happen when webpages content changes or goes defunct? Now you're also creating an archive.org... and on and on.
Don't get stuck and sink your time into a local maxima.
Maybe you'll find a market [of fools] willing to invest time into this exact locally optimal solution, but I predict it will be disappointingly small. The problem it solves isn't broadly substantial enough to warrant a specialized solution.
Only one way to know for sure, though ;)
Actually, this an ecosystem of visual bug reporting tools that already exists and it's very useful when your other testers/stakeholders are time constrained. These days people talk about user experience, well, this is the equivalent of that for tester experience. It makes it a lot easier to submit useful big reports.
When you mandate jira (which is slow even on its fastest day) you then a big report from a 2 second click in an on page tool to like a 10 minute process, filling out all the fields, cropping the screenshot, copying over the url and console log and any network errors and all that. It takes forever and people eventually just learn to slack you a sentence instead, or just don't even report things anymore because it's such a hassle.
Jira is the absolute worst tool for user facing interactions. It's designed for management, not devs, testers, or users.
There are much better tools to make your life easier if you fall into the latter groups.
When you mandate jira (which is slow even on its fastest day) you then a big report from a 2 second click in an on page tool to like a 10 minute process, filling out all the fields, cropping the screenshot, copying over the url and console log and any network errors and all that. It takes forever and people eventually just learn to slack you a sentence instead, or just don't even report things anymore because it's such a hassle.
Jira is the absolute worst tool for user facing interactions. It's designed for management, not devs, testers, or users.
There are much better tools to make your life easier if you fall into the latter groups.
[deleted]
I want to get away from creating tickets or sending emails highlighting UX concerns. This is cumbersome and not very transparent or collaborative.
Does a tool like this already exist?