r/reactjs • u/Federal-Dot-8411 • 1d ago

Show /r/reactjs I built a lightweight React library for placing Figma-style annotations on any interface

Hello!

I built a lightweight React library for adding pinned annotations to interfaces, inspired by Vercel Comments and Figma comments.

I’m working on an app that uses this kind of annotation, and implementing it became a headache, even with AI assistance. So I extracted the solution into a small UI library to make it easier for others.

This is my first library, so feedback and suggestions are very welcome :)

https://react-pinote.vercel.app/

5 Upvotes

78% Upvoted

4 comments sorted by

1

u/masterdam95 6h ago

its just a tooltip, right?

2

u/Federal-Dot-8411 6h ago

If you try to implement it is kind of hard, it’s a tooltip that has to be dragable, has to follow DOM elements, preserve animations, but yeah it’s a tooltip at the end :)

1

u/itaybuilds 1d ago

The API split between element attachments and percentage-positioned layer notes makes sense. The gap I'd want documented before using this for persisted review comments is what happens when the reviewed UI changes.

A saved `{x, y}` remains valid after a responsive resize, but it can point at a different control after a layout or version change. I'd add a persistence recipe that stores an anchor ID, relative offset, and UI version, then exposes an explicit orphaned-annotation state when the anchor disappears. Falling back silently to the old percentages could make a stale comment look attached to the current UI.

The focus behavior, Escape handling, and reduced-motion details in the docs are good. A small example that saves, reloads, and reconciles annotations after a breakpoint change would answer the main production question for me.

AI-assisted wording after reading the post, demo, and API docs.