React PDF API
Generate PDFs from your React components
Export the component you already built to a real PDF: selectable text, your fonts, your CSS. No html2canvas screenshots, no positioning lines by hand with jsPDF, no rebuilding the layout in @react-pdf/renderer primitives.
Render the component, get a PDF
Render your component to an HTML string on the server, post it, and return the PDF. The same JSX you ship to the screen becomes the document.
import { renderToStaticMarkup } from "react-dom/server";
import { Invoice } from "@/components/Invoice";
export async function POST(req: Request) {
const { order } = await req.json();
const html = "<!doctype html>" + renderToStaticMarkup(<Invoice order={order} />);
const res = await fetch("https://api.pdfpipe.xyz/v1/pdf", {
method: "POST",
headers: {
Authorization: `Bearer ${process.env.PDFPIPE_API_KEY}`,
"Content-Type": "application/json",
},
body: JSON.stringify({ html, options: { format: "A4" } }),
});
return new Response(res.body, { headers: { "Content-Type": "application/pdf" } });
}Why not the usual React approaches
html2canvas + jsPDF
A bitmap screenshot: text is not selectable, it pixelates on zoom, and lazy-loaded content is missing.
@react-pdf/renderer
Real PDF, but you rewrite the document in View and Text primitives and lose your existing CSS.
Client-side rendering
Pushes heavy work onto the user device and still cannot produce print-grade pagination.
Great for
- React invoice PDFs generated from order data.
- React report and dashboard exports.
- Per-user documents and certificates from components.
- Works in Next.js route handlers or any Node server.
Frequently asked
How do I generate a PDF in React?
Render your component to HTML with renderToStaticMarkup on the server, then POST that HTML to the render API and stream the PDF back. You keep your existing component and CSS.
How do I export a React page to PDF with real text?
Avoid canvas screenshots. Send the component HTML to a rendering API so the PDF contains real vector text that is selectable and searchable.
Can I build a React invoice or report PDF?
Yes. Pass your data to the component, render it to HTML, and the API returns the finished invoice or report PDF.
Is there a fuller walkthrough?
Yes, the React to PDF guide covers the component, the download button, and the plain-React version without Next.js.
Related guides and APIs
These pages cover related search intents. Pick the one that matches what you are building.
Read the full React to PDF guide, or get an API key. 500 free documents a month, no card required.