feedbackerr

Figma-style "comment mode" feedback for any React app. Toggle on a mode where users can drop pins anywhere on the page, leave comments, and view them in a side panel.

The library is React-only with inline styles — no MUI, no CSS-in-JS, no external UI dependencies. Peer dependencies are react and react-dom (>=18).

Install

npm install feedbackerr
# or
pnpm add feedbackerr

Quick Start

import {
  CommentProvider,
  CommentSurface,
  CommentSidePanel,
  CommentFab,
} from "feedbackerr";

function App() {
  return (
    <CommentProvider author={{ name: "Jane Doe", organisation: "Acme" }}>
      <div style={{ display: "flex", height: "100vh", overflow: "hidden" }}>
        <CommentSidePanel side="left" />
        <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
          <YourNavBar />
          <main style={{ flex: 1, overflowY: "auto" }}>
            <CommentSurface>
              <YourPageContent />
            </CommentSurface>
          </main>
        </div>
      </div>
      <CommentFab side="left" />
    </CommentProvider>
  );
}

By default comments are stored in localStorage — no backend needed to get started.

CSS requirements

feedbackerr uses position: fixed for the side panel and FAB. For the sidebar to anchor correctly to the left edge of the viewport, your app's root element must not have margin: auto or a constrained max-width.

If you're using a Vite or Create React App template, check your index.css or App.css for something like:

#root {
  max-width: 1280px;
  margin: 0 auto; /* ← remove this */
}

Replace it with:

#root {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

Storage Options

Option 1 — localStorage (zero backend)

import { CommentProvider, createLocalStorageAdapter } from "feedbackerr";

<CommentProvider
  author={{ name: "Jane" }}
  storage={createLocalStorageAdapter()}
>
  …
</CommentProvider>

Option 2 — Your own HTTP backend

import { CommentProvider, createHttpStorageAdapter } from "feedbackerr";

const storage = createHttpStorageAdapter({
  endpoint: "https://your-api.com/feedback",
  headers: { "x-api-key": "your-api-key" },
});

<CommentProvider author={{ name: "Jane" }} storage={storage}>
  …
</CommentProvider>

The adapter expects two endpoints:

• GET <endpoint> → returns the full array of comments as JSON
• PUT <endpoint> → receives the full array of comments as JSON and persists it

Minimal backend schema (Postgres)

create table feedback_comments (
  id   text primary key,
  data jsonb not null
);

Storing comments as jsonb means the table never needs migrating when the comment shape evolves.

CommentProvider Props

| Prop | Type | Required | Description | |---|---|---|---| | author | { name: string, organisation?: string } | ✅ | Who is leaving comments | | storage | StorageAdapter | — | Custom storage adapter (defaults to localStorage) | | storageKey | string | — | Override the localStorage key | | theme | PartialCommentTheme | — | Override the default theme | | urlTracking | UrlTrackingOptions | — | Options for URL tracking |

Publishing a New Version

# 1. Bump version
npm version patch   # or minor / major

# 2. Publish
npm publish

# 3. Push to GitHub
git push origin main --tags