Preparing…
PDFx components used
How to build a report PDF with react-pdf
Executive and ops reports change numbers weekly and layout rarely. Bind chart series and KPI props at render time, keep the theme in git, and skip spinning Chromium for every board pack download.
- Preview the live @react-pdf/renderer output on this page (no signup).
- Click Use this template to open it in the visual builder and bind your {{variables}}.
- Export the .zip of typed TSX, drop it into your Next.js app, and call renderToBuffer with your data.
Drop the exported folder into your app/ directory, import the template, and pass typed props. Render it server-side with renderToBuffer in a route handler, or stream it to the browser. No headless browser, no runtime to learn.
Related: How to generate PDFs in React in 2026 · react-pdf vs Puppeteer
A folder you own
import { Template } from "./investor-update";
import { renderToBuffer } from "@react-pdf/renderer";
const pdf = await renderToBuffer(
<Template data={data} />
);Questions about this investor update template
Is the preview the real PDF?
Yes. The sheet renders through @react-pdf/renderer, the exact engine behind the export and the hosted API. What you preview is what ships.
Do I own the exported code?
Yes. Export is a .zip of typed TSX, sample data, and a README. There is no proprietary runtime and no vendor lock-in. You render PDFs inside your own React or Next.js app.
Can I swap the sample chart data?
Yes. Chart and table props accept your series at render time. Keep the layout; replace the numbers from your analytics API.