Overview
An open-source library for placing visual annotations directly on web applications. Designers mark issues on staging, developers see them in code context, and AI agents receive structured export with source locations. Published on npm, supports React, Vue, and Solid.
Inside the product
Feedback that stays attached to the interface.
Select an element, leave a specific note and review it in place. This recording shows the real annotation tool running on its Nimbus demo page.
My roleCreator & maintainer
What I builtAnnotation UI / matching / developer tooling
Point at the actual interface element. The inspector identifies the target so feedback has a precise location.
Key Features
Framework-Agnostic Architecture
Design review tools are typically framework-specific or require heavy setup. Teams using different frameworks need a universal solution.
Built a zero-dependency core with framework adapters for React, Vue, and Solid. The core handles DOM fingerprinting, annotation state, and export - adapters are thin wrappers.
5 npm packages, single API across all frameworks. Install and start annotating in under 3 minutes.
DOM Element Fingerprinting
Annotations need to survive page reloads and code changes. Traditional selectors (IDs, classes) break when developers modify markup.
Designed a 6-priority fingerprinting system that identifies DOM elements using multiple fallback strategies - from stable attributes down to structural position.
Annotations reliably persist across page reloads and minor code changes without manual re-mapping.
AI Agent Integration
Design feedback typically lives in Figma comments or Slack - disconnected from code. AI coding agents can't access this context.
Built a structured JSON export with source locations. Annotations include component paths, element selectors, and designer notes - ready for AI agent consumption.
AI agents receive design feedback with full code context, eliminating the manual translation step between design review and implementation.