Preparing…
PDFx components used
How to build an EU VAT invoice in react-pdf
EU full invoices are field-dense: VAT IDs on both sides, supply date, rate breakdown, and bank details. HTML-to-PDF often tears the VAT table mid-row. This template encodes those blocks as react-pdf components so you can bind live billing data and keep renders inside your Next.js app for compliance-sensitive customer data.
- 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-eu-vat";
import { renderToBuffer } from "@react-pdf/renderer";
const pdf = await renderToBuffer(
<Template data={data} />
);Questions about this eu vat 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.
Which EU invoice fields are included?
Issue and supply dates, unique invoice number, supplier and customer name/address/VAT ID, unit prices ex-VAT, VAT rate per line, VAT breakdown by rate, net/VAT/gross totals, and bank details.
Can I change the currency or VAT rates?
Yes. Rates and currency symbols are data props. Update the sample data or bind live values from your billing system at render time.