@react-pdf-kit/viewer supports loading a PDF directly from a public or remote URL (HTTP/HTTPS) into your React application.

This method is ideal when:

• The PDF is hosted on an external server or CDN
• You want to display a static file that doesn’t require user interaction or API processing

Refer to Handling Source of PDF File (URL) for more information.

JSX

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

const DEFAULT_FILE_URL =
"https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf";

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

export default App;

TSX

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

const DEFAULT_FILE_URL =
"https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf";

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

export default App;