`).join('')}r.textContent='n .annotator-highlight { outline: 2px solid #F5E100 !important; outline-offset: 2px !important; cursor: crosshair !important; } .annotator-annotated { outline: 2px solid #00FF00 !important; outline-offset: 2px !important; position: relative; } .annotator-badge { position: absolute; top: -12px; left: -12px; background: #00FF00; color: #000; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; z-index: 999998; }',document.head.appendChild(r),window.ANNOTATOR_DELETE=function(n){const o=e.findIndex(e=>e.id===n);-1!==o&&(e.splice(o,1),c())},document.getElementById('annotator-toggle').onclick=function(){n=!n,this.textContent=n?'Stop':'Start',this.style.background=n?'#ff4444':'#F5E100',document.getElementById('annotator-status').textContent=n?'👆 Click any element to annotate':'Click \"Start\" to begin annotating'},document.getElementById('annotator-close').onclick=function(){confirm('Close annotator? Annotations will be lost unless you copy them.')&&(document.body.removeChild(a),document.body.removeChild(l),document.head.removeChild(r),document.querySelectorAll('.annotator-annotated').forEach(e=>{e.classList.remove('annotator-annotated');const t=e.querySelector('.annotator-badge');t&&t.remove()}),window.ANNOTATOR_ACTIVE=!1)},document.getElementById('annotator-copy').onclick=function(){0===e.length?alert('No annotations to copy!'):navigator.clipboard.writeText(`# Annotations (${e.length})nn${e.map(e=>`n## #${e.id}: ${e.selector}nn**Path:** \`${e.path}\`nn**Feedback:**n${e.comment}nn**Timestamp:** ${e.timestamp}n`).join('n---n')}n`).then(()=>{const e=this,t=e.textContent;e.textContent='✓ Copied!',setTimeout(()=>e.textContent=t,2e3)})},document.getElementById('annotator-clear').onclick=function(){confirm('Clear all annotations?')&&(e.length=0,t=0,document.querySelectorAll('.annotator-annotated').forEach(e=>{e.classList.remove('annotator-annotated');const t=e.querySelector('.annotator-badge');t&&t.remove()}),c())};let m=null;document.getElementById('annotator-modal-cancel').onclick=function(){l.style.display='none',document.getElementById('annotator-modal-input').value='',m=null},document.getElementById('annotator-modal-add').onclick=function(){const e=document.getElementById('annotator-modal-input').value.trim();e&&m&&(s(m,e),l.style.display='none',document.getElementById('annotator-modal-input').value='',m=null)},document.addEventListener('click',function(e){if(!n)return;if(e.target.closest('#annotator-toolbar')||e.target.closest('#annotator-modal'))return;e.preventDefault(),e.stopPropagation();const t=e.target;if(t.classList.contains('annotator-annotated'))return void alert('This element is already annotated!');m=t,document.getElementById('annotator-modal-title').textContent=i(t),l.style.display='block',document.getElementById('annotator-modal-input').focus()},!0),document.addEventListener('mouseover',function(e){n&&(e.target.closest('#annotator-toolbar')||e.target.closest('#annotator-modal')||(o&&o.classList.remove('annotator-highlight'),o=e.target,o.classList.add('annotator-highlight')))},!0),document.addEventListener('mouseout',function(e){n&&e.target===o&&(o.classList.remove('annotator-highlight'),o=null)},!0),c()})();" class="bookmarklet-link" draggable="true">
📝 Annotate Page
Or click it on this page to try it now!
How to Use
Drag the button above to your browser's bookmarks bar
Go to any webpage (like the case study)
Click the bookmarklet in your bookmarks bar
Click "Start" in the toolbar
Click any element on the page
Type your feedback and click "Add Annotation"
Click "Copy All" when done
Paste into Telegram/chat with me — I'll fix it!
🎯 Click to Annotate
Click any element, add feedback, see it highlighted with a numbered badge
📋 Copy as Markdown
All annotations export as structured markdown with CSS selectors
🌐 Works Everywhere
Use on any website — static pages, React apps, anything
🔒 Privacy First
Everything stays local, nothing sent anywhere
💡 Tip: Annotations are numbered and highlighted in green. Click "Copy All" to get markdown output with CSS selectors I can use to find and fix elements.
Try It Here
Click the bookmarklet above, then click "Start" and try annotating these demo elements:
This is a demo paragraph. Try selecting text or clicking the whole box.