Pins are Feedtack's core interaction primitive. When a user enters pin mode (via the modal or Shift+P), they can click anywhere on the page to drop a colored marker that captures both the spatial position and the underlying DOM element.

Pin data

Each pin captures:

Color palette

Users pick a pin color from a fixed palette. The palette is available programmatically via:

import { PIN_PALETTE } from "feedtack/react";

Pin anchoring

After submission, pins are visually anchored to their target elements using CSS selector resolution. If the target element moves (e.g. due to layout shifts or SPA navigation), the pin marker follows it.

Pin positions are recalculated:

• On initial mount
• When the current pathname changes (SPA navigation)

Coordinates

Pins store both absolute and percentage coordinates:

• x / y — Document-relative pixels (clientX + scrollX, clientY + scrollY). Useful for exact positioning on the same viewport.
• xPct / yPct — Percentage of total document dimensions. Useful for approximate positioning across different viewport sizes.

For submitted pins, Feedtack prefers anchoring to the resolved DOM element (via target.selector) over raw coordinates, so feedback stays attached to the right element even if the layout changes.

Using pin data

Once you have a pin payload, here are the most common things to do with it:

Re-highlight the element — target.selector is a CSS selector you can pass directly to document.querySelector() to scroll to or outline the element in a review UI.

Adapt to viewport size — xPct and yPct are percentages of the total document dimensions, so they remain a reasonable approximation across different screen sizes and zoom levels. Use x / y only when you need exact pixel positioning on the same viewport that captured the pin.

LLM triage — The full pin payload is structured specifically for LLM consumption. Pass it directly as user context alongside a system prompt like "A user has reported feedback on the element described below. Suggest a fix." The ancestor chain, component names, selectors, and bounding rect together give the model enough signal to identify the element without needing a screenshot.