Preparing…
PDFx components used
How to use this React invoice PDF template
If you need a clean billing invoice without EU-VAT extras, start here. Export, bind client and line-item props, and ship under Vercel size limits with owned code.
- 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 "./invoice-modern";
import { renderToBuffer } from "@react-pdf/renderer";
const pdf = await renderToBuffer(
<Template data={data} />
);Questions about this modern invoice 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.