Preparing…
PDFx components used
How to generate a SaaS subscription invoice PDF in Next.js
Subscription invoices mix seats, metered usage, and credits. Map Stripe (or your billing) line items into typed props, render in the same webhook that marks the invoice paid, and skip shipping Chromium to Vercel for every renewal.
- 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: Stop using HTML-to-PDF for invoices · react-pdf vs Puppeteer
A folder you own
import { Template } from "./saas-subscription-invoice";
import { renderToBuffer } from "@react-pdf/renderer";
const pdf = await renderToBuffer(
<Template data={data} />
);Questions about this saas subscription 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.
Does this work with Stripe invoice data?
Map Stripe invoice line items into the template's typed props (description, quantity, amount). You keep rendering in your app; Stripe stays the payment source of truth.
Why not PDFMonkey or a hosted invoice API?
Hosted APIs meter renders and require sending customer billing data to their servers. Exported react-pdf code stays in your repo with no per-document lock-in.