Page Notes
Sticky notes for ANY website: pin, type, drag, recolor, export — a free design-review tool.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
Press N (or the button), click anywhere to pin a note, then type, drag or recolor it. Notes persist per page in localStorage, and Export copies JSON you can paste into an issue. Drop it on staging and your client can review it with you.
Installation
$ npm i @guetix/page-notes
Publishing soonUntil it’s on npm, use the CLI or Manual tab. The API below stays the same.
vanilla.ts · any framework
import { pageNotes } from "@guetix/page-notes";
pageNotes({ hotkey: "n" }); // press N, click to pin
// pageNotes({ storageKey: "review-v2" }) — separate review roundsUsage
example.tsx
import { PageNotes } from "@/components/guetix/page-notes";
// only on staging:
{process.env.NEXT_PUBLIC_STAGE === "staging" && <PageNotes fullscreen />}Design reviews on stagingQA passesClient feedbackPersonal annotations
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| storageKey | string | "gx-notes:" + pathname | localStorage key. |
| colors | string[] | — | Note colors. |
| hotkey | string | null | "n" | Shortcut to start placing. |
| onChange | (notes) => void | — | Core only: sync somewhere. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- Notes are role=note with labelled textboxes; all actions are buttons; Esc cancels placing.