Quickstart
From GitHub install to your first pinned feedback in about three minutes.
InstaFix isn't published to the npm registry — that's a deliberate choice, not a "not yet." Every package installs straight from this repo's build output, via a disposable <package>-dist branch: same install experience, just a GitHub URL instead of a package name.
Two paths: the full setup (Next.js + a real database — the production shape) or the zero-server one (60 seconds, everything in the browser).
Full setup — Next.js + Prisma or SQLite
1. Scaffold
npx github:gnoopy/instafix#cli-dist initIf a Prisma schema is found, init offers to add the InstaFix models and generate a Prisma-backed API route. No Prisma schema? It offers SQLite instead (better-sqlite3, zero external services — no database server, no separate migration step) rather than assuming Prisma. Either way, it also generates a ready-to-use components/instafix-widget.tsx.
2. Install what init referenced
# Prisma path
npm install github:gnoopy/instafix#widget-dist github:gnoopy/instafix#adapter-prisma-dist
npx prisma db push
# SQLite path
npm install github:gnoopy/instafix#widget-dist github:gnoopy/instafix#adapter-sqlite-distPrisma path only: you'll need a client singleton at @/lib/prisma. If you don't have one:
// src/lib/prisma.ts
import { PrismaClient } from "@prisma/client";
const globalForPrisma = globalThis as unknown as { prisma?: PrismaClient };
export const prisma = globalForPrisma.prisma ?? new PrismaClient();
if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;3. Mount the widget
init already generated the component — drop it into your root layout:
// app/layout.tsx
import { InstaFixWidget } from "@/components/instafix-widget";
// ...inside <body>, alongside your other providers:
<InstaFixWidget />(Not using the generated component? The same thing, by hand: useInstaFix({ endpoint: "/api/instafix", projectName: "my-project" }) from @instafix/widget/react in any client component.)
Run your dev server and look bottom-right: the InstaFix button is there. Draw a rectangle on anything, type a comment, hit Send.
By default the widget shows in development but never in production builds — that's the point: clients review on dev/staging URLs. For a staging environment that builds in production mode, pass forceShow: true.
4. Triage what comes in
import { InstaFixInbox } from "@instafix/dashboard";
<InstaFixInbox projects="my-project" endpoint="/api/instafix" theme="auto" />That's the whole loop. From here: widget options · screenshots · auth & security.
Zero-server setup
No backend, no database — feedback lives in the visitor's browser. Perfect for prototypes and demos:
npm install github:gnoopy/instafix#widget-dist github:gnoopy/instafix#adapter-localstorage-distimport { initInstaFix } from "@instafix/widget";
import { LocalStorageStore } from "@instafix/adapter-localstorage";
initInstaFix({
store: new LocalStorageStore(),
projectName: "my-demo",
forceShow: true,
});This documentation site runs exactly this setup — try the widget right here.