Generating PDFs with React-PDF

When to Use

• Generating PDF documents (reports, invoices, resumes, forms, certificates)
• Creating PDFs that need complex layouts (multi-column, grids, cards)
• Building PDFs with inline SVG graphics, charts, or icons
• Producing documents with custom Google Fonts or emoji
• Any PDF task where flexbox layout is easier than absolute coordinate math

When NOT to Use

• Reading or extracting text from existing PDFs, use pdfplumber or pypdf instead
• Filling existing PDF forms, use Python pypdf or pdftk
• Converting HTML to PDF, use Playwright or WeasyPrint instead
• Simple one-off text PDFs with no layout needs, a Python script may be simpler

CRITICAL REQUIREMENTS

1. Fonts MUST be local files - Remote font URLs (http/https) do NOT work. Always download fonts to local files before using them.
2. Wrap async code in IIFE - Top-level await causes errors. Always use (async () => { ... })() pattern.
3. Disable hyphenation for custom fonts - Custom fonts lack hyphenation dictionaries and may crash or break words incorrectly. Always call Font.registerHyphenationCallback((word) => [word]); after registering custom fonts.

Files

• {baseDir}/skills/react-pdf/references/google-fonts.txt - Metadata for ~65 popular Google Fonts with TrueType URLs. Each line is a font variant in tab-separated format: font name, style, category, weight, url.
• {baseDir}/skills/react-pdf/references/components.md - Full component API reference and supported CSS properties
• {baseDir}/skills/react-pdf/assets/example-template.tsx - Minimal working example demonstrating fixed footers, page numbers, and unbreakable content. Read this before starting to understand the basic patterns. Note: not all APIs are shown here, always refer to the docs and {baseDir}/skills/react-pdf/references/components.md for the full API.

Prerequisites