I'm searching for a commercial product that enables commenting on HTML elements on a product so it can be shared with an org. Think google comments connected to Inspect Element in chrome that can be shared with an organization.<p>I want to get away from creating tickets or sending emails highlighting UX concerns. This is cumbersome and not very transparent or collaborative.<p>Does a tool like this already exist?
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.<p>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).<p>From there we went on to build Jam (<a href="https://jam.dev" rel="nofollow">https://jam.dev</a>) - 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.<p>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! :)
Bugherd is good for this. Used it extensively when I worked for a web agency and it saved so much time.<p><a href="https://bugherd.com/" rel="nofollow">https://bugherd.com/</a>
Yes. Only one solving the problem very very well right now.<p>Memex - <a href="https://getmemex.com" rel="nofollow">https://getmemex.com</a><p>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.<p><a href="https://github.com/peerlibrary/peerlibrary" rel="nofollow">https://github.com/peerlibrary/peerlibrary</a>
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..<p>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.<p>But then the problem is getting the client to actually use that tool.
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.
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:
<a href="https://github.com/hypothesis/h" rel="nofollow">https://github.com/hypothesis/h</a><p>From the W3C Web Annotation spec that Hypothesis implements <a href="https://www.w3.org/TR/annotation-model/" rel="nofollow">https://www.w3.org/TR/annotation-model/</a> :<p>> Selectors: <i>Fragment Selector, CSS Selector, XPath Selector, Text Quote Selector, Text Position Selector, Data Position Selector, SVG Selector, Range Selector, Refinement of Selection</i><p>> States: <i>Time State, Request Header State</i>, Refinement of State
I've actually seen folks post a wiki-style list here of tools in the spirit of your request.<p>The key thing your post is missing is that the word you're looking for is "annotations".<p><a href="https://hn.algolia.com/?q=annotations" rel="nofollow">https://hn.algolia.com/?q=annotations</a>
<a href="https://news.ycombinator.com/item?id=22876408" rel="nofollow">https://news.ycombinator.com/item?id=22876408</a><p>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.
<a href="https://web.archive.org/web/20120320063943/http://nimblecode.com/2010/04/21/the-appeal-of-annotations/" rel="nofollow">https://web.archive.org/web/20120320063943/http://nimblecode...</a>
<a href="https://web.archive.org/web/20120211054910/http://www.readwriteweb.com/archives/what_twitter_annotations_mean.php" rel="nofollow">https://web.archive.org/web/20120211054910/http://www.readwr...</a>
<a href="https://usersnap.com/" rel="nofollow">https://usersnap.com/</a> 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 (<a href="https://livecycle.io/" rel="nofollow">https://livecycle.io/</a>). 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.<p>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.<p>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.<p>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).<p>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...
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 <a href="https://birdeatsbug.com" rel="nofollow">https://birdeatsbug.com</a> for testing and reporting bugs internally. Think it's similar to jam.dev that others have suggested.
I built <a href="https://www.kontxt.io" rel="nofollow">https://www.kontxt.io</a> for this. You can @mention in comments to send emails with deep-links like this:<p><a href="https://www.kontxt.io/demo.html?kontxt_context_id=tJQebzVav-Ea-e9aAVthRy-tHtQUJ6TZVvCrBAGq3JrSF&kontxt_comment_id=1243" rel="nofollow">https://www.kontxt.io/demo.html?kontxt_context_id=tJQebzVav-...</a><p>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.
<a href="https://app.punchlist.com" rel="nofollow">https://app.punchlist.com</a> does exactly this.<p>For full transparency, I work at Punchlist.
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.
SingleFile [1] includes a simple annotation editor that allows you to highlight text and add notes in saved pages.<p>[1] <a href="https://github.com/gildas-lormeau/SingleFile/" rel="nofollow">https://github.com/gildas-lormeau/SingleFile/</a>
<a href="https://www.usebubbles.com" rel="nofollow">https://www.usebubbles.com</a> for comments in a video+screencast<p>Or, in Chrome with the dev tools open, hit:<p>Command + Shift + P<p>Then type: Capture full size screenshot<p>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.<p>Here is a demo: <a href="https://smort.io/demo/home" rel="nofollow">https://smort.io/demo/home</a>
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.<p>Drop me a message if you want any help!
Does Genius Web Annotator still work? I used it years ago and found it pretty handy: <a href="https://genius.com/web-annotator" rel="nofollow">https://genius.com/web-annotator</a>
PixelSnap - <a href="https://getpixelsnap.com/" rel="nofollow">https://getpixelsnap.com/</a>.<p>It might not be exactly what you asked for, but it might solve your problem in an alternative way.
I built this a few years ago, but I have no idea if it still works: <a href="https://getvox.co/" rel="nofollow">https://getvox.co/</a>
How is this your biggest problem?<p>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.<p>Don't get stuck and sink your time into a local maxima.<p>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.<p>Only one way to know for sure, though ;)