The universal file viewer

FileViewer is a composable rendering frame for PDFs, Office files, images, tables, text, and code. It keeps resource loading, fallback dimensions, controls, and style isolation at the component edge.

Documentation Source

Compatible with any format

The file metadata selects a renderer. The surrounding shell, controls, viewport, and resource contract stay the same.

family

viewer behavior

explicit input

Documents

PDFDOCXPPTX

PDF, DOCX, and PPTX render as paginated documents with stable zoom and page state.

fallbackFrameSize / fallbackSlideSize

Images

ImageTIFF

Raster inputs render as measured pages without changing the surrounding chrome.

fallbackFrameSize

Data

XLSXCSVJSON

Tables and structured payloads stay readable before they become extraction output.

fileName + mimeType

Text renderers

MarkdownHTMLCodeText

Plain text, markdown, HTML, and code use dense text renderers instead of screenshots.

inline text source

Virtualize without blanking

FileViewer follows Pierre's Inverse Sticky technique: preserve native scrolling, pin the rendered range while the parser catches up, and keep the document viewport filled during large jumps.

Native scroll. The browser keeps the scrollbar, momentum, focus, and accessibility semantics.
Sticky render window. When parsing lags behind a large jump, the rendered region stays pinned to the viewport edge.
No blank frame. The viewer never exposes an empty viewport while the next pages catch up.

Compose the shell

The preset preview is only one shape. The provider, header, content, sidebar, inset, viewport, document, and controls can be rearranged around the same resource.

file-viewer.tsx

<FileViewerProvider
  source={source}
  fallbackFrameSize={frameSize}
  isolateStyles
>
  <FileViewer>
    <FileViewerHeader>
      <FileViewerTitle />
      <FileViewerControls />
    </FileViewerHeader>
    <FileViewerContent>
      <FileViewerInset>
        <FileViewerViewport>
          <FileViewerDocument />
        </FileViewerViewport>
      </FileViewerInset>
    </FileViewerContent>
  </FileViewer>
</FileViewerProvider>