The bar in your dev server

The npm package for Astro and Next.js.

For Astro and Next.js projects, the notemend npm package puts the bar in your dev server — only under npm run dev, never in a production build. It is the same bar as on a live site, with a designer's tools around it.

init wires the bar in (Astro: the integration in astro.config; Next.js: a client loader, a route and transpilePackages), finds your breakpoints in the CSS, lists your pages and writes notemend.config.mjs. --yes takes every default.

What the dev bar adds

• Inspectors — spacing, size and type in design pixels, with WCAG contrast for text; color (O): the fill and the text colour; and border & radius (B): the border on each side, its colour and the radius of each corner — every colour named by the CSS variable it was written with (“≈” when only its value matches one, as with a stylesheet from another domain).
• A layout grid over the page, from your container and columns.
• A breakpoint canvas — every width side by side — and device previews in real frames.
• The page list from your routes, to jump between pages.
• Sanity (E, with sanity: true) — hides Sanity's visual-editing overlay while you comment or measure.
• Live — each open tab keeps a line to the dev server (/__devbar/events): a reply, a fix or Claude taking a thread shows at once, from the CLI, an agent or a teammate in a linked project.

The config

notemend.config.mjs sets the breakpoints, the preview devices, the pages and their groups, the grid's container and columns, the elements the bar leaves alone (ignore) and its zIndex; it is read again on every page load, no restart. The package's README lists every option.

Where comments go

Unlinked, comments stay in the project as feedback/comments.json with screenshots in feedback/images/ — no account needed. npx notemend login and link send them to a cabinet project instead, shared with the team and the live site's bar.