What it looks like
A top bar holds a button for comment mode, a shortcut hint and the count of open comments. In comment mode the cursor turns into a crosshair and every click drops a teardrop-shaped pin with the commenter's initials and a small number in the corner. Each author keeps a fixed color. Clicking a pin opens a white bubble with the thread, relative timestamps, a reply field and a resolve button; once resolved, the pin fades and leaves the artwork. On the right sits a panel with tabs for open and resolved comments and a search filter.
You may be looking for this if you asked for something like
- let clients comment right on the artwork, like in Figma
- click a spot on an image and leave a comment there
- numbered dots with comments on top of a prototype screen
- layout approval with comments I can mark as resolved
- a document review area with a thread on each spot
- my team should point out fixes directly on a site screenshot
- visual feedback on a page without an external tool
Also known as
- comment overlay
- comment pins
- pinned comments
- image annotations
- visual feedback tool
- design review comments
- comment threads
When to use
- Approving artwork, banners and campaign pieces with clients inside your system
- Reviewing screens and prototypes in agency or product portals
- Comments on floor plans, contracts or documents shown as images
- QA flows where the team flags visual bugs on the screen itself
When to avoid
- Comments that must follow a text passage that moves, since a pin only stores a percentage position
- Very narrow phone screens, where the side panel is hidden
How to ask your AI
Add a Figma-style comment layer over the artwork preview in my approval portal: numbered pins with threads, resolve and reopen, a filterable side panel, a C shortcut for comment mode, keyboard navigation and events that save everything to my API.
With THM Componentes, you paste the full prompt from the catalog, which already includes this component's source code, and the AI reproduces this exact effect instead of improvising.
Questions about Alfinete
Where does Alfinete store comments?
In your app state. Alfinete works with v-model and emits an event for every new pin, reply, resolution, reopening and move, with the position in percent. To let everyone see the same comments, wire those events to your API or a real-time database; the component does not ship its own server.
Can I use Alfinete over any content?
Yes. Alfinete takes your content through a slot, so it works over an image, a screenshot, a prototype or a document. Pins are stored as percentages of the area, so they follow it when it resizes. Without a slot, the demo shows a sample poster with four comments.
Does Alfinete work with the keyboard?
Yes. In Alfinete, the C key toggles comment mode, N and P or the arrow keys move through open pins, Enter opens a thread and Esc closes it. Creating, resolving and moving comments triggers an announcement for screen readers.
