https://github.com/react-pdf-kit/starter-rp-remix-js
React PDF Kit Starter toolkit with Remix and JavaScript
https://github.com/react-pdf-kit/starter-rp-remix-js
javascript pdf-viewer pdf-viewer-react pdfjs pdfjs-dist react-pdf react-pdf-viewer reactjs remix remixjs
Last synced: about 1 month ago
JSON representation
React PDF Kit Starter toolkit with Remix and JavaScript
- Host: GitHub
- URL: https://github.com/react-pdf-kit/starter-rp-remix-js
- Owner: react-pdf-kit
- Created: 2025-07-18T04:26:43.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2026-03-12T03:43:13.000Z (3 months ago)
- Last Synced: 2026-03-12T10:22:41.370Z (3 months ago)
- Topics: javascript, pdf-viewer, pdf-viewer-react, pdfjs, pdfjs-dist, react-pdf, react-pdf-viewer, reactjs, remix, remixjs
- Language: TypeScript
- Homepage: https://react-pdf.dev
- Size: 104 KB
- Stars: 0
- Watchers: 0
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React PDF Kit Starter Toolkit in Remix and JavaScript
[](https://codesandbox.io/p/github/react-pdf-kit/starter-rp-remix-js/main)
Welcome to the React PDF Kit Starter Toolkit! This repository provides a comprehensive guide on integrating React PDF with Remix and JavaScript. It showcases how React PDF Viewer component can be integrated and rendered as part of a React.js project.
## Table of Contents
- [Usage](#usage)
- [Project Setup](#project-setup)
- [Running the Example Project](#running-the-example-project)
- [Examples](#examples)
## Usage
### Project Setup
1. **Clone the Repository**: If you haven't already, clone the repository and navigate into the project directory.
```bash
git clone https://github.com/react-pdf-kit/starter-rp-remix-js.git
cd starter-rp-remix-js
```
2. **Install Dependencies**: Install the necessary dependencies using npm, yarn, pnpm or bun.
```bash
npm install
# or
yarn install
# or
pnpm install
# or
bun install
```
### Running the Example Project
This repository includes an example project to demonstrate React PDF Kit in action.
1. **Start the Development Server**: Use the following command to start the development server
```bash
npm run dev
# or
yarn dev
# or
pnpm run dev
# or
bun run dev
```
2. **Open in Browser**: Open your browser and navigate to `http://localhost:5173` (or the port specified in your terminal) to see the example project in action
### Using the React PDF Component
Once the example project is running, you can explore the source code to see how the React PDF component is integrated. Here is a brief overview:
1. **Import the component**: Import the desired React PDF component into your codes
```tsx
import { RPProvider, RPLayout, RPPages } from "@react-pdf-kit/viewer";
export const AppPdfViewer = (props) => {
// eslint-disable-next-line react/prop-types
const { showToolbar = true, providerProps, defaultLayoutProps } = props;
return (
);
};
```
2. **Use the component in the page**: Add the React PDF component to your page
```tsx
import { ClientOnly } from "remix-utils/client-only";
import { RPConfig } from "@react-pdf-kit/viewer";
import { AppPdfViewer } from "../components/AppPDFViewer";
export default function Index() {
return (
{() => (
RP Starter Toolkit: Remix + JavaScript
Default Toolbar
Without Toolbar
Mobile
)}
);
}
```
## Examples
For more examples, please refer to the `app/routes/_index.tsx` file in this repository:
- Default Toolbar
- Without Toolbar
- Mobile View
_Remark: If you would like more examples, feel free open an issue._
For more configurations, please check the [documentation](https://docs.react-pdf-kit.dev) site.
## Meta
- Homepage: [https://www.react-pdf.dev](https://www.react-pdf-kit.dev)
- Docs: [https://docs.react-pdf.dev](https://docs.react-pdf-kit.dev)
---
Thank you for using React PDF Kit! We hope this toolkit helps you build amazing React.js applications. If you have any questions or need further assistance on this example, please feel free to open an issue. Happy coding!