Click a React element, change that exact span of .tsx

Not on Vite. The stamping plugin is compiled into the PortBay binary, written out to PortBay's own data directory, and handed to your dev server through a config generated outside your repo. There is no package to add and none to remove: uninstall PortBay and your package.json, lockfile and node_modules are byte-for-byte what they were. It is not on npm and is not meant to be, because nothing needs to serve it.

No. That changed in August 2026 and some documentation has not caught up. Both .jsx and .tsx are scanned script-first now, their host elements carry a data-pb-loc naming file, line and column, and text, class, attribute and page-settings edits all write back — the cross-stack parity test drives all four lanes against a real React fixture at src/App.jsx and every one of them writes. One tier genuinely did not come back, and the next answer is about that.

Component usages. In a .vue or .svelte file a <Card/> tag carries its own coordinate, so an element that component rendered still traces back to your markup. In a .jsx or .tsx file it does not, because a capitalised tag there can be a TypeScript generic parameter list rather than a component, and inserting an attribute into the wrong one is a syntax error in your module. The practical cost is markup produced by a library you did not author: it carries no coordinate, and PortBay says so rather than guessing.

Not to disk. The coordinate is real — it is in the HTML your browser receives — but it is added by the dev-server transform on the way there and never written back to a file, so there is nothing in your repo that exists to make the editor work and nothing to strip out later. This is the structural difference from editors that stamp their own id attribute into your source and reprint the file through a formatter: those change your components before they can edit them, and the reformatting arrives whether you wanted it or not. PortBay splices into the authored bytes and leaves the formatting around them alone.

Yes to className: JSX spells the class attribute className, so PortBay searches JSX-capable files for both className and class rather than only the HTML spelling — searching for class alone silently skipped every JSX class attribute in the tree. Computed classes are handled honestly rather than optimistically: a style change becomes a Tailwind class rewrite only when the utility would actually win the property, and the planner screens a computed className={cn(...)} branch for a conflicting same-family token before it touches the static literal. When it cannot, the change goes to a PortBay override sheet and the notice tells you which happened. Your design tokens are editable too: renaming a token in a v3 tailwind.config or a v4 @theme block rewrites every class reference to it across your authored markup in the same save, or refuses by name if it could not read the whole project.

Only the parts you actually authored. A text run holding an expression is refused by name — the message says it is a template expression and points you at the source — because rewriting bytes that hold {plan.name} would either destroy the binding or write a literal where a value belongs. Static copy in your JSX edits normally. This is the same rule PortBay applies to every template language it supports, not a React-specific limitation.

Not CRA or a bare webpack setup: PortBay can only add instrumentation to dev servers it launches through Vite or Astro, so Babel pipelines get no stamping. Text, class and attribute edits still resolve by searching your source there, but structural edits are refused rather than guessed. Next.js is a separate case with its own supported path and its own page. On the free-versus-paid question: the editor is Pro, in early access behind a Settings opt-in, not compiled into the open-source build, and it refuses to attach while a project is shared over a public tunnel. It is also one live page at one breakpoint at a time — there is no multi-frame infinite canvas.