Make a little room.
Show your browser’s bookmarks bar and drag the Bookmarklet button above into it. That’s the installation.
Show exactly what you mean. Draw guides, arrows and notes on any page, then share a clearer screenshot.
↑ Drag Bookmarklet to your bookmarks bar to install.
Show your browser’s bookmarks bar and drag the Bookmarklet button above into it. That’s the installation.
Open a page and click your new bookmark. Draw a guide, circle a detail, or leave a note exactly where it belongs.
Press H to hide the controls. Take a screenshot and share it with a teammate—or your AI.
Updating? Replace your old bookmark by dragging the button again. Or create a bookmark and paste this code into its URL field:
Use a 32 px grid, adjustable margins, and full-page guides to spot alignment issues. Hold Shift for perfect circles and snapped arrows.
Drag marks to move them. Double-click text to edit it. Choose a color, undo a change, or clear the page and start fresh.
Grid spacing: 8, 16, 24, 32, 64 or 128 px. Left/right and top/bottom margins default to 32 px. Arrow keys change margins by 8 px; Shift changes them by 1 px. Cmd + Up/Down jumps through 8, 16, 32, 64, 128, 256, 512 and 1024. Live width and height measurements fade after a pause. The grid is a visual reference; it doesn’t snap your marks.
Drag the toolbar header to move it. H hides it and enables Browse mode; H again restores your previous tool. Escape asks before closing and discarding your annotations. Delete removes a selected mark; Cmd/Ctrl + Z undoes changes outside Browse mode. Shortcuts leave text fields alone.
Line up the edges. Point at the gap. Add a note. This page is your first canvas.
Marks stay fixed to the viewport and disappear when you refresh or close. Browser settings pages, some PDF viewers, and sites with restrictive security policies may block bookmarklets.