FileViewerDocument

FileViewerDocument renders the active file route. It is the leaf that chooses PDF, image, CSV, text, Markdown, HTML, email, Office, or another supported renderer from the current FileViewerProvider source.

Copy<FileViewerInset>
  <FileViewerViewport>
    <FileViewerDocument />
  </FileViewerViewport>
</FileViewerInset>

Behavior

• Reads the resolved source from context and dispatches to the matching renderer. Unsupported types fall back to a download card.
• Renderers are lazy-loaded — only the one your file needs is fetched, so a PDF page never ships the spreadsheet engine.
• Renders behind Suspense (showing a category-shaped skeleton while the renderer loads) and an error boundary that resets when the file changes.
• Must be rendered inside FileViewerViewport, which provides the measurement boundary used by renderers and diagnostics.
• Header controls are explicit composition: render FileViewerControls in the header. Use controls when a headerless preview should keep renderer controls inside the document.

API Reference

Source

"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

import { FileErrorBoundary, ViewerFallback } from "./file-viewer-fallback";
import { useFileViewerRequiredResourceState } from "./file-viewer-resource-state";
import { FileViewerRoute } from "./file-viewer-route";
import { useIsInsideFileViewerViewport } from "./file-viewer-layout";

export type FileViewerDocumentProps = {