GitHub

Parse Viewer

PreviousNext

Renders a Retab parse result — extracted per-page markdown with a Rendered/Text toggle and page controls.

The parse viewer renders the extracted markdown from a Retab parse: toggle each page between Rendered and Text, and page through the result. Below is the raw renderer on its own.

Pair it with a source document through renderDocument to get the standard side-by-side parse layout (document ↔ markdown, synced by page) — that composition is the Parse Viewer block.

Usage

The parse result is passed as a prop; the source document is supplied through a renderDocument render-prop — here a <PdfViewer /> — so the viewer carries no document-rendering dependency of its own. The document is expected to tag its pages with data-page-number (the bundled PdfViewer does) so the panes can scroll to each other.

import { ParseViewer } from "@/components/viewers/parse/parse-viewer"
import { PdfViewer } from "@/components/ui/pdf-viewer"
 
export function Example({ result }) {
  return (
    <ParseViewer
      result={result}
      renderDocument={(handlers) => (
        <PdfViewer
          src="/document.pdf"
          bare
          onVisiblePageChange={handlers.onCurrentPageChange}
          className="h-full"
        />
      )}
    />
  )
}

Omit renderDocument to show the extracted markdown full-width.

Props

PropTypeDescription
resultParseResponse | nullThe parse result; output.pages is an array of per-page markdown.
renderDocument(handlers) => ReactNodeRenders the source document beside the markdown. Receives { onCurrentPageChange, onScrollProgressChange }. Omit to show markdown full-width.
isProcessingbooleanShow the parsing state while a result is pending.