abbox

Install

About 15 minutes. Only step 1 is needed to use Abbox; steps 2 and 3 add real usage numbers and your live website.

1. Connect your code

  1. Sign up at abbox.com and create a project for your app.
  2. Choose Connect GitHub and install Abbox Connect. Select only the repositories Abbox needs: the web app, plus API repositories if you want their responses shown.
  3. Pick the web app repository, the branch you deploy from, and its folder if it’s a monorepo (for example frontend). Choose Connect and analyze. The first analysis takes a few minutes; later pushes are analyzed automatically.

Recommended: protect your main branch with required reviews, so nothing reaches it without a person approving. Abbox never pushes to existing branches either way; see GitHub access.

2. Connect PostHog (optional)

  1. On the project page, under Analytics, pick your PostHog region (EU or US) and choose Connect PostHog.
  2. Sign in to PostHog and approve read-only access to the one project your app sends events to.

Numbers appear in the viewer’s Tracking tab the next time it opens. Events are matched by page path, so the numbers are the same whichever of your sites the viewer shows.

3. Show your live website (optional)

Supported: Next.js App Router, including src/app and route groups such as src/app/(app)/layout.tsx.

  1. On the project page, under Live website, save your site’s address.
  2. In the folder with your Next.js package.json, run:
    npx @abbox/cli@latest init --mode production
    It adds the @abbox/inspector package at an exact version, wraps next.config with withAbboxInspector, adds one component to your root layout(s), and switches npm run build to a script that adds the inspector.
  3. Check the setup, then review the diff and open a pull request yourself:
    npx @abbox/cli doctor
  4. Merge and deploy. Abbox checks your address every 30 seconds and connects once the inspector is live.

Prefer not to run the CLI? Let Abbox open the pull request on the project page does the same on a new abbox/inspector-install-… branch.

What it costs your build and your visitors

  • Builds with the inspector keep your bundler (Turbopack or webpack) and run one extra Babel pass over your own components, so they take a little longer.
  • Each element carries a data-abbox-src attribute with its source file and line, and pages load about 11 KB more JavaScript (gzipped). It only switches on inside the Abbox viewer.
  • Builds without the inspector ship none of it: no attributes, no extra JavaScript.
  • Abbox’s sites may show your pages in a frame; see the inspector.

Choose which builds get it

On any host (Vercel, Docker, your own CI), ABBOX_INSPECTOR=1 at build time adds the inspector to a plain next build, and ABBOX_INSPECTOR=0 leaves it out. On Vercel, preview builds get it automatically. In a Dockerfile, a build argument that defaults to off lets you turn it on per environment:

ARG ABBOX_INSPECTOR=0
ENV ABBOX_INSPECTOR=$ABBOX_INSPECTOR
RUN npm run build

Then pass --build-arg ABBOX_INSPECTOR=1 only for the builds Abbox should show. For local development: npm run dev:abbox.

Running init again

Running init again (for example to upgrade) never undoes your changes. It updates files it generated only if you haven’t edited them, leaves your layouts, next.config and changed npm scripts alone, and lists anything it kept.

See your changes on localhost (no deploy)

See what you changed before you commit, with the same Changes tab: pulsing dots on what changed, a card for each change, and a click that opens the page, including modals behind clicks. Everything runs on your computer; your code isn’t sent anywhere.

  1. Add the inspector for local use once (preview mode is the default): 
    npx @abbox/cli@latest init
  2. Run your app with it: 
    npm run dev:abbox
  3. In a second terminal, in the same folder: 
    npx @abbox/cli@latest watch
    It analyses your code as it was at the last commit, then again on every save, and prints a link. Open it.
  • --base main compares with main instead of your last commit.
  • --app http://localhost:3001 if your app runs on another port.
  • --api ../my-api adds your backend, so pages opened from a change get mocked answers from its real code.
  • Each save takes a few seconds to analyse (about 15 s for a 15-page app). Chrome may ask once to let the viewer reach your local network; Safari may block it, so use Chrome or Firefox.

Remove Abbox

  • Inspector: in the folder with your Next.js package.json, run
    npx @abbox/cli@latest uninstall
    It takes out exactly what init (or Abbox’s setup pull request) added: the @abbox/inspector package, the withAbboxInspector wrapper in next.config, <AbboxInspectorRoot /> and its import in every root layout, the build and dev:abbox scripts, babel-loader when init added it, and the files init created. Your own edits stay, and it updates the lockfile. Add --dry-run to see the list first. Then commit and deploy.
  • PostHog: Disconnect on the project page (the token is revoked at PostHog).
  • GitHub: uninstall Abbox Connect in GitHub settings → Applications.
  • Your data: Delete project on a project page, or Delete account on the Account page. See what deletion removes.