
Render PDF Files
in your React Project Easily
The React PDF Viewer component that you’ll actually enjoy using in any website, web app or SASS. Simple and fast to integrateStep 1
Install React PDF library with your preferred package manager
npm install @react-pdf-kit/viewer
bun, pnpm and yarn are also supported.Step 2
Select a React framework and use the React PDF component
src/App.jsx
import {
RPConfig,
RPProvider,
RPLayout,
RPPages,
} from "@react-pdf-kit/viewer";
function App() {
return (
<RPConfig licenseKey="YOUR_DOMAIN_TOKEN">
<RPProvider src="https://cdn.codewithmosh.com/image/upload/v1721763853/guides/web-roadmap.pdf">
<RPLayout toolbar>
<RPPages />
</RPLayout>
</RPProvider>
</RPConfig>
);
}
export default App;
Looking to Get Started Even Faster?
Explore carefully prepared examples and demos for the React framework of your choice.React (JS, Webpack)
Based on Webpack runtime, A React JavaScript example project showing how to install and configure the React PDF viewer componentReact (TS, Webpack)
Based on Webpack runtime, A React TypeScript example project showing how to install and configure the React PDF viewer componentReact (JS, Vite)
Based on Vite runtime, A React JavaScript example project showing how to install and configure the React PDF viewer componentReact (TS, Vite)
Based on Vite runtime, A React TypeScript example project showing how to install and configure the React PDF viewer componentNext.js App Router (JS)
Based on Webpack runtime, A Next.js App Router JavaScript example project showing how to install and configure the React PDF viewer componentNext.js App Router (TS)
Based on Webpack runtime, A Next.js App Router TypeScript example project showing how to install and configure the React PDF viewer componentNext.js Pages Router (JS)
Based on Webpack runtime, A Next.js Pages Router JavaScript example project showing how to install and configure the React PDF viewer componentNext.js Pages Router (TS)
Based on Webpack runtime, A Next.js Pages Router TypeScript example project showing how to install and configure the React PDF viewer componentReact (TS, Turborepo, Vite)
Based on Vite runtime, A React TypeScript example project built with Turborepo showing how to install and configure the React PDF viewer componentNext.js (TS, Turborepo)
Based on Webpack runtime, A Next.js TypeScript example project built with Turborepo showing how to install and configure the React PDF viewer componentGatsby (JS)
Based on Webpack runtime, A Gatsby JavaScript example project showing how to install and configure the React PDF viewer componentGatsby (TS)
Based on Webpack runtime, A Gatsby TypeScript example project showing how to install and configure the React PDF viewer componentRemix (JS, Vite)
Based on Vite runtime, A Remix JavaScript example project showing how to install and configure the React PDF viewer componentRemix (TS, Vite)
Based on Vite runtime, A Remix TypeScript example project showing how to install and configure the React PDF viewer componentDocusaurus (JS)
Based on Webpack runtime, A Docusaurus JavaScript example project showing how to install and configure the React PDF viewer componentDocusaurus (TS)
Based on Webpack runtime, A Docusaurus TypeScript example project showing how to install and configure the React PDF viewer componentElectron (JS, Vite)
Based on Vite runtime, An Electron JavaScript example project showing how to install and configure the React PDF viewer componentElectron (TS, Vite)
Based on Vite runtime, An Electron TypeScript example project showing how to install and configure the React PDF viewer componentReact Router (JS, Vite)
Based on Vite runtime, A React Router JavaScript example project showing how to install and configure the React PDF viewer componentReact Router (TS, Vite)
Based on Vite runtime, A React Router TypeScript example project showing how to install and configure the React PDF viewer componentTanStack Router (JS, Vite)
Based on Vite runtime, A TanStack Router JavaScript example project showing how to install and configure the React PDF viewer componentTanStack Router (TS, Vite)
Based on Vite runtime, A TanStack Router TypeScript example project showing how to install and configure the React PDF viewer componentCan’t find one that fits your need?
Request here
What’s Next?
Now that you successfully used the React PDF Viewer component, let’s explore how to customizeand take advantage of other React PDF features.