Dev server for React renderer for creating PDF files on the browser and server

How to install

pnpm install -D @uixdimi/react-pdf-preview
npm install -D @uixdimi/react-pdf-preview
yarn add -D @uixdimi/react-pdf-preview

How it works

"scripts": {
  "dev": "react-pdf --dir=src/templates --port=3000"
}

Caveats

1. In order for the previewer to work, all templates must pass down the DocumentProps down to the document. Eg:

export default function Quixote({ creator, ...props }: QuixoteProps) {
  return (
    <Document {...props} title="Don Quijote de la Mancha">
    ...

2. Sometimes you might want to include components in your templates. Options are:

• Create components folder anywhere you need it, this way it will be ignored by the previewer.
• Prefix component filenames with underscore.

See the example template here: ./templates/quixote.tsx

Kudos

• @diegomura for the amazing @react-pdf/renderer
• @resend for the inspiration from react-email

Stack

• Vite
• React
• Tailwind

License

MIT © Dimitar Mitov