visual-feedback

A small button lets your users screenshot the page, mark it up and write a note. You receive one report and store it where you want. It has no service, no tracking and no global CSS, and it fits any design.

Try it here. A report you send stays in the page, as the site's own list.

Ask your coding agent:

Install the visual-feedback npm package (https://www.npmjs.com/package/visual-feedback) and add it to this app by following its AGENTS.md. Place its button where it covers nothing, and match its position, colours and corners to our design.

Or the old-school way, by hand:

npm install visual-feedback

In the browser, through a bundler (without one, see docs/API.md):

import { createFeedback } from "visual-feedback";

createFeedback({ endpoint: "/api/feedback" });

On the server, where the report arrives (a Next.js route here). This route checks the report and stores nothing yet: a recipe in docs/recipes/ stores it, and says how to keep it private.

// app/api/feedback/route.ts
import { FeedbackRequestError, parseFeedbackRequest } from "visual-feedback/server";

export async function POST(request: Request): Promise<Response> {
  try {
    const { report } = await parseFeedbackRequest(request);
    // Store `report`, images included: docs/recipes/ has tested code for six places.
    return new Response(null, { status: 204 });
  } catch (error) {
    if (error instanceof FeedbackRequestError) {
      return new Response(error.message, { status: error.status });
    }
    throw error;
  }
}

In React or Next.js, render the component once, in the root layout:

// app/layout.tsx
import { Feedback } from "visual-feedback/react";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Feedback endpoint="/api/feedback" />
      </body>
    </html>
  );
}

• Where to store reports, with tested code: docs/recipes/
• With sign-in: call discardDraft() at logout, so a kept draft never comes back for the next user (docs/API.md)
• Behaviour and privacy: docs/SPEC.md
• Options, methods and types: docs/API.md
• Making it match your site: docs/THEMING.md
• For coding agents: AGENTS.md
• Source, issues and releases: github.com/dorumrr/visual-feedback

MIT