How pins stay put

What Nuni records when you comment, and how it finds the element again after the page changes.

Reliable pins are the heart of Nuni. A comment is only useful if it is still attached to the right thing after the next deploy.

What is stored

When you click an element, Nuni records several independent ways to find it again:

• Selectors: a stable id, a test id (data-testid, data-test, data-cy, data-nuni), the shortest unique CSS selector built from human-written classes and attributes, and a structural path.
• Content: the element’s text, identifying attributes (href, name, aria-label, alt, placeholder), and a short text snippet from its closest containers (like the card title).
• Geometry: its box on the page, where inside it you clicked, the viewport size and scroll position.
• Context: the URL, page title, author, comment and time. In React apps, the component name too.

Generated class names (CSS modules, styled-components, emotion) and utility classes (Tailwind) are ignored, because they change between builds or say nothing about identity.

How it is found again

Every candidate element is scored against all of these signals. Text is treated as identity for repeated items like list rows and cards; for one-off elements such as a hero button, the copy can change and the pin still follows.

If no element scores high enough, Nuni does not guess. The comment appears under Couldn’t find on this page in the panel, with the text it was left on. A pin on the wrong element is worse than no pin.

Pins also follow layout changes live: scrolling, resizing, responsive breakpoints, content loading in, and elements being moved or re-rendered.

Tested against real changes

Every change to the engine runs a benchmark of real-world page changes in Chromium: copy edits, translations, reordered and re-sorted lists, regenerated CSS-module classes, added wrappers, moved forms, duplicate cards, desktop to mobile, collapsed accordions, content pushed down by banners, deleted elements and more. CI fails if fewer than 95% of pins land on the right element, or if more than one lands on the wrong one.

Tips for rock-solid pins

• Add data-testid or data-nuni to elements that matter. They are the strongest signal.
• Stable, meaningful ids and class names help. Hashed ones are ignored.