Skip to main content
The preview at localhost:5173 renders actual PDF bytes. Inspect mode adds a click-to-source layer on top: every element on the page maps back to the exact line and column in docs/<id>/index.tsx that produced it. That mapping is what lets a human point at a rendered PDF and have an agent edit the right JSX.

​
Toggling inspect mode

Two ways:
  • Click the Inspect button (crosshair icon) in the doc toolbar.
  • Press i anywhere in the viewer. Pressing it again toggles off. The shortcut is ignored while you are typing in an input or textarea.
The button is disabled until the source map for the current render is ready, which happens automatically after each render.

​
Selecting an element

With inspect mode on, hover highlights elements on the page. Click one and a selection panel appears with:
  • Tag: the source JSX tag, like h1 or div.
  • Source location: line and column of the opening tag in docs/<id>/index.tsx.
  • Text: a snippet extracted from the PDF under the selected region, so you can confirm you picked the right node, and an editor for it (below).
Press Escape or click the × to clear the selection. Every selection is also written to the agent cursor at node_modules/.open-pdf/current.json, so you can skip the comment entirely and just tell your agent “make this bigger”. See For agents for how that file works.

​
Editing text in place

When the selected element carries text, the selection panel opens it in a small rich text editor (built on editorcn and Tiptap). Type to change the copy; select a range and use the toolbar for bold, italic, underline, strikethrough, text colour, and highlight. Each change is written to docs/<id>/index.tsx about half a second after you stop, and the PDF re-renders from the saved file with the selection still open. Formatting lands in the source as inline styles on spans, the same shape an agent would write:
The editor reads existing inline styles and the tw classes it can express (font-bold, italic, underline, text-[#hex]) on nested spans, so previously formatted runs show up formatted. Text that reaches the element through a prop, a call site, or a data array (<KeyValue label="Client" />, {p.title} inside a .map) is editable as plain text only: the toolbar hides, and the change is written where the literal lives. Enter inserts a line break inside the element; there is no way to add a second paragraph from the editor, that stays a job for your agent. Structural changes, new sections, and layout are still comments and agent work. The editor is for the copy and the emphasis.

​
Leaving a comment

The selection panel has a note field. Write what you want changed, in plain language:
  • “make this bold”
  • “change to ‘Open Doc Rocks’”
  • “this table is too cramped, add breathing room”
Click Comment. The dev server writes the comment directly into the doc’s source as an invisible marker:
The marker is a JSX comment inserted as the first child of the element you selected. It never renders, so the PDF output is unchanged. Because it lives in source, comments survive dev server restarts and show up in git diffs. The text attribute is base64url-encoded JSON containing your note. You can leave several comments across a doc, or across multiple docs, before handing off.

​
Applying comments

Tell your agent to apply the comments. In Claude Code that is the bundled apply-comments skill:
The agent finds every @pdf-comment marker, reads the note, edits the enclosing JSX element accordingly, and deletes the marker. Comments it cannot resolve are left in place and reported as skipped rather than guessed at. As soon as the agent saves the file, HMR re-renders the PDF in your preview. The loop end to end:
1

Press i

Toggle inspect mode in the running preview.
2

Click and comment

Select an element, write a note, click Comment. Repeat for as many elements as you want.
3

Agent applies

Run /apply-comments. The agent edits the source and removes the markers.
4

Preview updates

HMR re-renders the PDF. Verify the change, or leave another comment.
The preview bytes carry inspector annotations for the click-to-source mapping. The toolbar’s download button and open-pdf export both re-render a clean PDF without them.