# Show a PDF beside the agent's work

ArtifactPanel reads a document's text into safe blocks. For a file with no text to show, such as a PDF, it shows the file's type and size and says there is no preview, with a download. It doesn't draw PDF pages, and Candor bundles no PDF engine. To read the original beside the work, render it with a PDF library in your own tab, or pass the pages you render to DocumentViewer (Pro), which shows them with labelled boxes over them; the document review pattern does that for extracted values.

This pattern uses pdf.js. Its `pdfjs-dist` package has a display layer for rendering and a viewer built on it. The hello-world example loads a file with `getDocument`, takes a page with `getPage`, sizes it with `getViewport`, and draws it with `page.render` on a canvas, scaling the canvas by `window.devicePixelRatio` on high-density screens. The stable release on its getting-started page was 6.5.438 on 9 November 2026. Its FAQ asks that the main file and the worker file are exactly the same version, and advises drawing only the pages on screen, because rendering every page at full size uses a lot of memory.

Put the viewer in a SidePanel tab and the extracted text, if you have it, in an ArtifactPanel tab next to it. With `keepTabs`, switching tabs keeps the viewer's scroll position instead of starting again. To point at a page, Citation opens a popover with the source's label, an excerpt and where it came from. Put the page in `origin`, for example "Lease.pdf · page 4", and the excerpt in `snippet`. Citation has no callback and doesn't move your viewer, so a button that jumps to the page is yours to add beside it. Say the page only when you know it: if your extraction didn't record where a passage came from, show the passage without a location rather than a plausible one.

Web page: https://candor.themethodic.com/patterns/pdf-rendering

## Components

- **Side panel** (`side-panel`, Pro; https://candor.themethodic.com/docs/side-panel.md): Tabs beside the thread; one can hold your PDF viewer, and `keepTabs` keeps its scroll (Pro).
- **Artifact panel** (`artifact-panel`, Pro; https://candor.themethodic.com/docs/artifact-panel.md): The extracted text, or the file's type and size with a download when there is no preview (Pro).
- **Citation** (`citation`, free; https://candor.themethodic.com/docs/citation.md): An inline [n] that opens a source from the message's data; its `origin` can name the page.
- **Payload** (`payload`, free; https://candor.themethodic.com/docs/payload.md): Text or markup the extraction returned, shown as text.
- **Document viewer** (`document-viewer`, Pro; https://candor.themethodic.com/docs/document-viewer.md): Pages your app rendered, with zoom, page turning and labelled boxes over them (Pro).

## Install

```bash
npx candor-ui add side-panel artifact-panel citation
```

## Notes

- Left to the app: loading and bundling pdf.js and its worker, fetching the file (serve it from your own origin), the text layer for selecting and searching, thumbnails, and handling a password-protected or damaged file. Say so when a file can't be shown; don't draw a blank page.
- A region is coordinates your extraction produced. Candor doesn't compute or check them, and a box on the page says only where the extraction thinks it was found.
- Read against pdf.js's getting-started, hello-world and FAQ pages on 9 November 2026. They did not cover the worker setup option or the text layer, so check those in the version you install.