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.
• 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.

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.