---
title: How pins stay put
description: What Nuni records when you comment, and how it finds the element again after the page changes.
sidebar:
  order: 1
---

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 `id`s and class names help. Hashed ones are ignored.