Back to labs

PDF Canvas

A document review surface for drawing model output directly over PDF pages. Bounding boxes stay data-driven, so extraction results can be inspected without custom markup per schema.

Document overlay viewer

The PDF stays as the base layer while JSON annotations render as selectable regions above it for review, correction, and schema debugging.

Open live

Notes

  • JSON bounding boxes map cleanly to rendered page coordinates.
  • Selection state is kept separate from PDF rendering.
  • Designed for document AI extraction and validation flows.

Code

A compact implementation sketch for the pattern behind this lab.

1type BoundingBox = {2  id: string;3  label: string;4  page: number;5  rect: { x: number; y: number; width: number; height: number };6};7 8export function PdfCanvas({ boxes }: { boxes: BoundingBox[] }) {9  return (10    <div className="relative">11      <PdfPage />12      {boxes.map((box) => (13        <button key={box.id} style={toPageRect(box.rect)}>14          {box.label}15        </button>16      ))}17    </div>18  );19}