Documentation Index
Fetch the complete documentation index at: https://pdfn.dev/docs/llms.txt
Use this file to discover all available pages before exploring further.
Skip pdfn Cloud and run the full pipeline yourself. You control the browser, the infrastructure, and the output.
Want managed PDF generation? Use client.generate() with pdfn Cloud — no infra or browser management needed. How it works
React Component → render() → HTML → Puppeteer/Playwright → PDF
render() converts your React template to self-contained HTML- You pass that HTML to Puppeteer or Playwright to generate a PDF
Setup
npm install @pdfn/react puppeteer
import { pdfn } from '@pdfn/react';
import puppeteer from 'puppeteer';
import fs from 'node:fs';
import Invoice from './pdfn-templates/invoice';
async function generatePdf() {
const client = pdfn();
// 1. Render React to HTML
const { data, error } = await client.render({ react: <Invoice /> });
if (error) {
console.error(error.message);
return;
}
// 2. Convert HTML to PDF
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setContent(data.html, { waitUntil: 'networkidle0' });
await page.waitForFunction(() => window.PDFN?.ready === true);
const pdf = await page.pdf({
preferCSSPageSize: true,
printBackground: true,
});
await browser.close();
fs.writeFileSync('invoice.pdf', pdf);
}
generatePdf();
npm install @pdfn/react playwright
import { pdfn } from '@pdfn/react';
import { chromium } from 'playwright';
import fs from 'node:fs';
import Invoice from './pdfn-templates/invoice';
async function generatePdf() {
const client = pdfn();
// 1. Render React to HTML
const { data, error } = await client.render({ react: <Invoice /> });
if (error) {
console.error(error.message);
return;
}
// 2. Convert HTML to PDF
const browser = await chromium.launch();
const page = await browser.newPage();
await page.setContent(data.html, { waitUntil: 'networkidle' });
await page.waitForFunction(() => window.PDFN?.ready === true);
const pdf = await page.pdf({
preferCSSPageSize: true,
printBackground: true,
});
await browser.close();
fs.writeFileSync('invoice.pdf', pdf);
}
generatePdf();
Add @pdfn/tailwind if your templates use Tailwind CSS. See Styling.
Required PDF options
Always use these two options when calling page.pdf():
await page.pdf({
preferCSSPageSize: true, // Respect page size from template
printBackground: true, // Include background colors
});
await page.waitForFunction(() => window.PDFN?.ready === true);
Comparison
| pdfn Cloud | Self-Hosted |
|---|
| Setup | Managed — no infra or browser setup | You manage infra and Chromium |
| Scaling | Auto-scales | You handle scaling |
| Compliance | PDF/A-1b, PDF/A-2b, PDF/A-3b | Not available |
| Cost | Usage-based pricing | Your infrastructure costs |
Next steps
Styling
Tailwind CSS, custom CSS, and inline styles
Troubleshooting
Error codes, common issues, and fixes
