Pinning Comments
ReviewPin anchors each comment to a specific element on the page using a stable CSS selector — so pins reappear in the right place even after navigating away and coming back.
How it works
Press C or click the comment icon
The element picker activates. The cursor changes to a crosshair and elements are highlighted as you hover.
Click an element
ReviewPin generates a stable CSS selector for that element using its ID, data-testid, classes, or position in the DOM. The selector is stored with the comment so the pin survives page reloads.
Type your comment
A comment input appears near the element. Press Enter or click Save. The pin icon appears anchored to the element.
Pin stays in sync
When you scroll or resize, ReviewPin repositions all pins by re-querying each element's current bounding box. If an element is not in the DOM yet (e.g. lazy-loaded content), the pin retries automatically when the DOM changes.
Drag to reposition
If you placed a pin in the wrong spot, you can drag it to a new element without deleting and recreating the comment.
- Click and hold the pin icon.
- Drag it over a different element — the cursor changes to a grabbing hand.
- Release. The pin re-anchors to the element under your cursor.
A single click on a pin opens the comment card. Dragging requires moving the cursor at least 5px before the drag mode activates, so accidental drags are prevented.
Selector stability
ReviewPin tries to build the most stable selector possible, in this priority order:
| Priority | Strategy | When used |
|---|---|---|
| 1 | #id | Element has a unique ID |
| 2 | [data-testid] | Element has a data-testid attribute |
| 3 | .class-combination | Element has a unique set of classes |
| 4 | parent > tag:nth-of-type(n) | Fallback for unstyled or generic elements |
On highly dynamic pages (e.g. infinite scroll lists), pins may occasionally shift if the underlying DOM structure changes significantly between visits.