pagepen

Annotated screenshot feedback for React — draw on the page, capture it, send it to your own dashboard.

Part of Pagepen, a self-hosted annotated-screenshot feedback system. This package is the React widget; it talks to a Pagepen server you run yourself (your screenshots and feedback never leave your infrastructure).

Install

npm install @ccnanas/pagepen

react and react-dom (18 or 19) are peer dependencies.

Usage

import { FeedbackWidget } from "@ccnanas/pagepen";

<FeedbackWidget siteKey="my-site" endpoint="https://feedback.example.com" />

• Review mode (default): the widget is invisible until a reviewer activates it with a share link (?pagepen=<token>). Opening it enters a full-screen annotation mode with a toolbar docked at the bottom: comment on elements, point arrows, write a summary in the floating composer, and Send — a full-page screenshot is captured with the marks burned in. Annotations are stored as vectors and replay on the live page. A compact mode tucks the bar down to a minimal tool pill (persisted per browser).
• Support mode (mode="support"): an embeddable end-user issue reporter with prefilled identity and file attachments (in the bar's details drawer).

Props

| Prop | Type | Notes | |------|------|-------| | siteKey | string | Public site identifier registered on your server. | | endpoint | string | Your Pagepen server origin. Required. | | mode | "review" \| "support" | Default "review". | | user | { name, email } | Support mode: prefilled, locked identity. | | copy | { title?, prompt?, footer? } | Text overrides. | | freezeSelectors | string[] | Selectors to force-reveal during capture (reveal-on-scroll sections). |

The widget renders inside a Shadow DOM, so host-page styles never leak in or out.

Self-hosting the server

The Pagepen server + dashboard (Next.js + Postgres + Vercel Blob) is what the widget reports to. endpoint points at your deployment.

License

MIT