react-pdf-gen

A @react-pdf/renderer project that builds a 71-page ebook ("React-PDF + AI: The Builder's Guide to Premium PDF Generation") from React/TSX components. The build script auto-syncs a registry of pages, renders the PDF in two passes (the second pass populates the clickable TOC with real page numbers), and a shell script rasterizes the PDF to PNG pages for visual review.

Read the book: react-pdf-ai-builders-guide.pdf — the built 71-page PDF, tracked in the repo.

Quick start

Prerequisites: Node 22+, pnpm (corepack enable), and poppler-utils (pdftotext for the TOC pass, pdfinfo for page validation, and pdftoppm for PNG export).

pnpm install
pnpm build       # sync registry + render PDF -> output/react-pdf-ai-builders-guide.pdf (two passes)
pnpm export      # rasterize PDF -> output/pages/page-NN.png (needs poppler-utils)
pnpm pipeline    # build + export
pnpm dev         # watch inputs; sync + rebuild after each relevant change

pnpm export uses pdftoppm to rasterize and pdfinfo to verify that PNG and PDF page counts match. If either is missing, the script prints platform-specific install instructions for poppler-utils and exits (see scripts/export-pages.sh). The build also needs pdftotext for the TOC pass and pdfinfo for the uniform-LETTER page-size check.

Documentation

• Architecture
  • Overview — how pages, components, and the registry fit together
  • Page anatomy — what a page file looks like, multi-file chapters, chrome pages
  • Design system — token shapes, shared styles, font registration, conventions
• Build
  • Pipeline — sync → two-pass render, clickable TOC wiring, and PNG export
  • Registry sync — scripts/sync-project.ts, how manifest.ts + the pages tree become registry.ts
  • Pagination and layout — wrap={false}, minPresenceAhead, fixed headers, orphan avoidance
• Guides
  • Add a page — step-by-step for adding a new chapter or content page
  • Markdown content — MarkdownRenderer, supported syntax, when to reach for it
  • Troubleshooting — build errors, render surprises, the CodeBlock template-literal trap
• Reference
  • Commands — every pnpm script and what it does
  • Components — props for every component in src/components/
  • Theme tokens — concrete color, typography, spacing, geometry values

Repository layout

src/
  build.tsx              entry point; two-pass render (TOC positions extracted between passes)
  Document.tsx           assembles allPages from registry into one <Document>
  manifest.ts            source of truth for chapter structure (groups, num, title, entryPage)
  registry.ts            AUTO-GENERATED by `pnpm sync` from manifest + src/pages/ — gitignored
  tocPositions.ts        reads output/toc-positions.json (chapter # -> first page)
  fonts.ts               registers Inter (7 weight/style variants) and disables hyphenation
  styles/
    theme.ts             design tokens (colors, typography, spacing, page, borders, syntax)
    shared.ts            StyleSheet shared by every page
  components/            ContentPage, ChapterTitle, SectionHeading, TipBox, CodeBlock,
                         MarkdownRenderer, AccentBar, CoverDecor, icons, ...
  pages/                 one folder per chapter, one file per PDF page (NN-chapter/NN-page.tsx).
                         Each chapter folder starts with 00-title.tsx (the chapter divider),
                         then 01-<chapter>.tsx, then continuation pages. Chrome lives in
                         01-cover/, 02-toc/, 15-conclusion/.
  utils/                 syntaxHighlight.ts, markdownParser.ts
scripts/
  sync-project.ts        regenerates registry.ts from manifest.ts + src/pages/
  export-pages.sh        pdftoppm wrapper, default 200 DPI
fonts/                   Inter .ttf files (Regular, Medium, SemiBold, Bold + italics)
content/chapters/        author drafts. One file (12-markdown-demo.md) is split at its
                         page-break marker and loaded by both pages in
                         src/pages/14-markdown-automation/ via MarkdownRenderer;
                         the rest are reference material.
reference/               long-form research notes referenced while authoring (not loaded by the build)
templates/               readers' starter pack — generalized prompt files + project-instructions template
output/                  generated PDF, toc-positions.json, and PNGs (gitignored)

License

MIT — see LICENSE. Bundled third-party assets (Inter font, react-icons, Lucide, upstream-derived react-pdf notes) retain their own licenses — see NOTICE.