Preparing…
PDFx components used
How to use this invoice template in React
Invoice PDFs are the document type that breaks first on HTML-to-PDF: long line-item tables tear mid-row, fonts drift on serverless, and Chromium blows past Vercel size limits. A react-pdf invoice keeps layout deterministic and the ~2 MB runtime inside a normal Route Handler. Export this template, pass your billing props, and keep customer PII inside your own app.
- 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: Why react-pdf tables split across pages (and the fix) · react-pdf vs Puppeteer
A folder you own
import { Template } from "./credit-note";
import { renderToBuffer } from "@react-pdf/renderer";
const pdf = await renderToBuffer(
<Template data={data} />
);Questions about this credit note 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.
Will the line-item table split mid-row across pages?
The exported components use react-pdf patterns that keep rows intact (wrap={false} on rows). For the full explanation, see our guide on react-pdf table page breaks.
Can I bind my own invoice data?
Yes. Variables like {{clientName}} and line-item arrays are exposed in the export. Pass typed props at render time; one template covers every customer invoice.