Feedtack is a drop-in React feedback overlay. A "Feedback" button opens a modal where anyone can leave site-wide notes, page-level comments, or place a pin on a specific element — all from one entry point.

Feedtack emits a structured JSON payload so complete that an LLM can attempt a first-pass fix before consuming developer hours.

What Feedtack does

• Renders a floating "Feedback" button over your app
• Opens a modal with Site, Page, and Element feedback tabs
• Lets users drop spatial pins on any element with crosshair mode
• Captures rich DOM context: CSS selectors, ancestor chains, bounding rects, React component names
• Emits a versioned JSON payload (schema v2.0.0) with full page, viewport, and device metadata
• Supports threaded replies, resolution, and archiving
• Plugs into any backend via the adapter interface

What Feedtack does NOT do

• LLM triage or routing — Feedtack emits, others act
• Developer dashboard or inbox
• Screenshot annotation

Architecture

Feedtack ships as three entry points:

The React UI is the primary integration path. The inject script (feedtack/inject) is a self-contained IIFE that works on any site without a build step or React. The core package has zero React dependency — safe to import in Node.js environments.

Quick example

import { FeedtackProvider } from "feedtack/react";
import { ConsoleAdapter } from "feedtack";

export default function App() {
  return (
    <FeedtackProvider
      adapter={new ConsoleAdapter()}
      currentUser={{ id: "u1", name: "Trillium", role: "admin" }}
    >
      <YourApp />
    </FeedtackProvider>
  );
}

<!-- No build step required — works on any site -->
<script src="feedtack.inject.js"></script>
<script>
  window.Feedtack.init({
    adapter: { type: "console" },
    currentUser: { id: "u1", name: "Trillium", role: "admin" },
  });
</script>

// app/layout.tsx
"use client";

import { FeedtackProvider } from "feedtack/react";
import { ConsoleAdapter } from "feedtack";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <FeedtackProvider
          adapter={new ConsoleAdapter()}
          currentUser={{ id: "u1", name: "Trillium", role: "admin" }}
        >
          {children}
        </FeedtackProvider>
      </body>
    </html>
  );
}

Ready to get started? Head to Getting Started.