@sdaitzman/prototype-devbar

A dark, sticky-bottom dev bar for Next.js prototypes — with a nutrition label dialog (owner, coverage scope, fidelity, data source), a live performance popover (FPS + page-load timings), a git-branch popover (last 10 commits), and a Configure popover whose settings persist to localStorage keyed by the prototype's version.

Drop one <PrototypeDevBar /> into any prototype and stakeholders always know what they're looking at.

Install

npm install @sdaitzman/prototype-devbar @base-ui/react lucide-react

Peers: React 19+, Next.js 15+ (App Router), Tailwind v4 (@import "tailwindcss").

Use

Full step-by-step guide: INTEGRATING.md. TL;DR:

// app/globals.css
@import "tailwindcss";
@import "@sdaitzman/prototype-devbar/styles.css";

// app/layout.tsx
import { PrototypeConfigProvider } from "@sdaitzman/prototype-devbar";
import pkg from "../package.json";

<PrototypeConfigProvider version={pkg.version} owner="Your team">
  {children}
</PrototypeConfigProvider>

// app/page.tsx
import { PrototypeDevBar, getGitInfo } from "@sdaitzman/prototype-devbar";
import pkg from "../package.json";

<PrototypeDevBar git={getGitInfo()} appName={pkg.name} version={pkg.version} />

// package.json
"scripts": { "prebuild": "schema-capture-git-info" }

Enable flag

PrototypeDevBar is off by default. It only renders when PROTOTYPE_DEVBAR_ENABLED=true is set when the page is rendered (build time for static export, request time otherwise). The gate is server-side, so the variable is intentionally not NEXT_PUBLIC_ — it never enters the browser bundle.

# .env (commit it for dev + shareable prototype deploys)
PROTOTYPE_DEVBAR_ENABLED=true

Leave the variable unset on real customer-facing production environments to keep the bar out of those builds. <PrototypeDevBar /> must be mounted from a server component (App Router default) — mounting under a "use client" parent fails closed.

Features

• Nutrition label — the five transparency fields (Owner / Coverage scope / Fidelity / Data source / Last updated) surface as a dialog, ensuring every prototype has them.
• Configure popover — your registered extraFields={[…]} (toggles, text, color, select, checkbox-group) plus an "Open nutrition label on load" toggle. Per-field reset dots; versioned localStorage persistence. The nutrition-label fields themselves (owner / coverage scope / fidelity / data source) are not runtime-editable — they live on the provider props and ship with the build.
• Performance — live FPS/jank chart (60s rolling window, configurable timescale), TTFB/FCP/LCP/DCL/Load timings.
• Branch popover — HEAD SHA and last 10 commits captured at build time via the schema-capture-git-info bin. Runtime does no child_process / fs work, so static exports and edge deploys (Cloudflare Pages, Workers) work unchanged.
• Extras API — register consumer-specific settings (toggle | text | color | select | checkbox-group) that appear in the Configure popover and read back with useExtraField(key).

License

MIT © Sam Daitzman