In this case, you can load a PDF that’s included in your project by referencing a static path, such as /sample.pdf.

Refer to Handling Source of PDF File (Internal File Path) for more examples.

While you can load from other internal paths like /assets/pdf/guide.pdf, for simplicity, this example will use a file from the public/ directory.

JSX

import {
  RPConfig,
  RPLayout,
  RPPages,
  RPProvider,
} from "@react-pdf-kit/viewer";

// Adjust the path as needed
const INTERNAL_PDF_PATH = "/ECMAScript_annotated.pdf";

export const InternalPathPdfViewer = () => {
  return (
    <>
      <p style={{ textAlign: 'center' }}>PDF file : {INTERNAL_PDF_PATH}</p>
      <RPConfig>
        <RPProvider src={INTERNAL_PDF_PATH}>
          <RPLayout toolbar>
            <RPPages />
          </RPLayout>
        </RPProvider>
      </RPConfig>
    </>
  )
}

TSX

import {
  RPConfig,
  RPLayout,
  RPPages,
  RPProvider,
} from "@react-pdf-kit/viewer";
import { type FC } from "react";

// Adjust the path as needed
const INTERNAL_PDF_PATH = "/ECMAScript_annotated.pdf";

export const InternalPathPdfViewer: FC = () => {
  return (
    <>
      <p style={{ textAlign: "center" }}>PDF file : {INTERNAL_PDF_PATH}</p>
      <RPConfig>
        <RPProvider src={INTERNAL_PDF_PATH}>
          <RPLayout toolbar>
            <RPPages />
          </RPLayout>
        </RPProvider>
      </RPConfig>
    </>
  );
};