Click a Next.js element, change that exact span of .tsx

No, and this is the main thing separating PortBay from the category. The data-pb-loc stamp exists only in the HTML your dev server renders — it is added during compilation and never written to a file in your repo. Nothing is left behind to clean up before shipping, no attribute survives into git, and the plugin self-gates on NODE_ENV so a production build emits nothing at all.

Because 0.1.0 fails silently under Turbopack. Turbopack passes the plugin a filename relative to the project root where webpack passes an absolute one, and 0.1.0 gives up on the relative form without logging anything — you get a dev server that returns HTTP 200 with zero stamps and no clue why. 0.1.1 handles both. A ^0.1 range resolves either version, so pin ^0.1.1 or a stale lockfile will keep serving you the broken one.

Both, at 0.1.1 and above. That was verified against the served HTML of a real Next 16.3.x app running on default Turbopack, with a 0.1.0 build as the negative control. Next 16 uses Turbopack by default and Next 15 uses webpack by default; the same config key, experimental.swcPlugins, covers both.

No, deliberately. It hands you the exact text to paste and changes nothing in your project. Vite and Astro projects get stamping for free because PortBay launches those dev servers and can pass its own config from outside your repo, but next dev reads its config only from your project root and resolves SWC plugins only from your node_modules — so instrumenting Next.js without touching your project is not possible, and PortBay asks rather than doing it behind your back.

One tier, and it is worth stating plainly: an element produced by a component you did not author — a UI library's own markup — carries no source coordinate. The elements you wrote are stamped; the ones a dependency rendered are not. The reason is that in a .tsx a capitalised tag can be a TypeScript generic parameter list rather than a component, and guessing wrong would insert a syntax error into your module, so PortBay stamps host elements only rather than guessing.

Both. A className edit goes through a tree-sitter JSX path that rewrites the attribute in place, and the right-hand rail covers layout, spacing, size, position, typography, backgrounds, borders and effects. Text is edited by double-clicking it in the live page rather than typing into a panel field.

Two capabilities are worth knowing about. Renaming a Tailwind design token rewrites every reference to it across the project in the same save, so the definition and its uses never drift apart. And a selection can be extracted into a new component — that works on JSX, and on Astro, Svelte and Vue elsewhere in PortBay — with a by-name refusal when the selection contains a template expression it cannot safely move. Both write to your source the way any other edit does.

No. There is one preview: your real dev server, at your real .test URL, with your real routes and data, opened in your actual browser with a docked edit bar. There is no multi-frame canvas and no artboard model. If you want to compare two screens side by side, you open two browser tabs.