Skip to main content
Pdfn turns React components into production-ready PDFs — invoices, receipts, reports. It works with Next.js, Vite, and Node.js.

How it works

You write templates using <Document> and <Page> components. Pdfn takes care of the rest:
import { Document, Page, PageNumber } from '@pdfn/react';

export default function Invoice({ data }) {
  return (
    <Document title={`Invoice ${data.number}`}>
      <Page size="A4" margin="1in" footer={<PageNumber />}>
        <h1>Invoice #{data.number}</h1>
        <p>Customer: {data.customer}</p>
        <p>Total: ${data.total}</p>
      </Page>
    </Document>
  );
}
Then generate a PDF with one call:
import { pdfn } from '@pdfn/react';

const client = pdfn();
const { data, error } = await client.generate({ react: <Invoice data={invoiceData} /> });

Key concepts

  • Automatic pagination — content flows across pages. No manual page-break CSS.
  • Repeating headers and footers — defined as React components with <PageNumber> and <TotalPages>.
  • Same output everywhere — your template produces identical PDFs locally and in production.
  • Dev previewnpx pdfn dev gives you live preview with hot reload. Edit a template, see the PDF update.

How templates become PDFs

React Component → render() → HTML → PDF
  • Local developmentnpx pdfn dev runs a preview server with embedded Puppeteer. No setup needed.
  • Productionclient.generate() sends the template to pdfn Cloud and returns a PDF buffer. Set PDFN_API_KEY and deploy.
  • Self-hostedclient.render() gives you HTML. Pass it to your own Puppeteer or Playwright setup.
All three paths produce the same layout. Your templates don’t change between environments.

Get started

Explore the docs