PDF generation API for React
Turn PDF templates and application data into finished documents in the browser. Add pages, replace text, fill form fields, preview the result, and export a standard PDF under your own React UI.
Generation is in early access
Leave your email and we’ll reach out with access
By sending us your email, you agree to our Privacy policy
Works with vanilla JavaScript and most popular frameworks
Generate PDFs from templates and app data in React
The SDK starts from a valid PDF, not an empty document. Use a branded template or a small seed PDF, fill it from React, preview every change, and save the finished file in the same browser tab.
Start from a PDF template
Load an invoice, certificate, contract, or report template as a Uint8Array. Existing page design, fonts, graphics, and form fields remain available while your application supplies the changing data.
- useLoadPdf()
Create and repeat pages
Append blank pages with an explicit width and height, or duplicate an existing template page when each record needs the same layout. Reorder or remove pages before export.
- usePageCreate()
- usePageDuplicate()
Generate page text
Create a paragraph at PDF page coordinates and insert text from application data. Programmatic edits use the same document model as text entered through the editor.
- useParagraphCreate()
- useProgrammaticEditor()
Replace template text
Read extracted paragraphs, find placeholders owned by your application, and replace their contents before saving. This works at paragraph level rather than as an HTML templating engine.
- getAllParagraphIds()
- getPlainTextParagraphs()
- getParagraphEditor()
Populate PDF forms
Map application values into existing AcroForm fields to produce quotes, applications, and customer documents without flattening the template into an image.
- useWidgets()
- useWidgetValue()
Add form fields
Create text fields, checkboxes, radio buttons, dropdowns, and other supported AcroForm widgets from code, with stable field names for later population.
- useWidgetsCreate()
Preview the generated document
Render the working PDF inside the same React experience where it is generated. Users can review pages and, when enabled, make final edits before export.
- Viewport
- PageCanvas
Export PDF bytes
Serialize the result as a standard PDF Uint8Array for storage or upload, or trigger a browser download. PDFSDK does not send the document anywhere unless your application does.
- useDocumentSaving()
Generate a PDF in React in 3 steps
Load a valid PDF template, populate it with your application data, and serialize the result in the browser. No PDF generation service is involved.
Load a template or seed PDF
PdfProviders owns the document state. Pass template bytes to useLoadPdf and render Viewport when the document is ready.
import { useEffect } from 'react';
import { PdfProviders, Viewport, useLoadPdf } from '@sdk-pdf/react';
import '@sdk-pdf/react/style.css';
function GeneratorView({ template }: { template: Uint8Array }) {
const [state, loadPdf] = useLoadPdf();
useEffect(() => {
void loadPdf(template);
}, [template, loadPdf]);
if (state.status !== 'ready') return null;
return (
<div style={{ height: '100vh' }}>
<Viewport />
</div>
);
}
export function App({ template }: { template: Uint8Array }) {
return (
<PdfProviders>
<GeneratorView template={template} />
</PdfProviders>
);
}
Generate PDFs programmatically from your own template
This PDF API is built for React apps that already have a PDF template or can ship a small seed document. Load your template, fill in your data, then save once to get the finished PDF.
import { useEffect } from 'react';
import { type TextWidget, useWidgets, useWidgetValue } from '@sdk-pdf/react';
const invoice: Record<string, string> = {
'invoice.number': 'INV-1042',
'customer.name': 'Dana Whitfield',
};
function FillField({ widget }: { widget: TextWidget }) {
const [, setValue] = useWidgetValue(widget);
const value = invoice[widget.fieldName];
useEffect(() => {
if (value !== undefined) setValue(value);
}, [value, setValue]);
return null;
}
export function FillTemplate() {
const { widgets } = useWidgets();
return widgets.map((widget) =>
widget.widgetType === 'text' ? (
<FillField key={widget.id} widget={widget} />
) : null,
);
}Add a React PDF component that runs in the browser
No generation service, no workers, no WASM binaries, no font files to host. React PDF generation runs from one package, one stylesheet, and one bundler alias. The template goes in, and the finished PDF comes out as bytes.
'use client';
import dynamic from 'next/dynamic';
const Generator = dynamic(() => import('./generator'), { ssr: false });
export default function Page() {
return <Generator />;
}- Framework
- React 19, with react and react-dom as peer dependencies
- Module format
- ESM only; use a bundler (Vite, Next.js, or equivalent)
- Runtime
- Browser only. In Next.js, use a client component with ssr: false
- Bundle
- 277 KB gzipped; CJK character maps are code-split and lazy
- Assets to host
- None. Everything the engine needs is in the module graph
- Bundler
- Alias the unused canvas require once (see config snippets)
- Strict Mode
- Off for now. The simulated unmount kills the engine
- Encrypted files
- Pass { password } to loadPdf. RC4, AES-128, and AES-256
- Input
- One PDF template or seed document as a Uint8Array
- Output
- Uint8Array with the saved PDF, or a browser download
PDFSDK vs other JavaScript PDF generation libraries
PDFSDK combines template editing, PDF rendering, and a customizable React workspace. Libraries built for document creation start from a blank page, but leave the preview and editing UI to your application.
| Library | Starts empty | Edits templates | Built-in preview | HTML input | Runtime |
|---|---|---|---|---|---|
| Via seed PDF | Yes | Yes | No | React browser | |
| pdf-lib | Yes | Yes | Bring your own | No | Browser, Node, and more |
| jsPDF | Yes | Limited | Bring your own | Plugin | Browser and Node |
| PDFKit | Yes | No template editor | Bring your own | No | Browser and Node |
Where to go next
React PDF Editor
Let users edit text, pages, images, and forms before exporting the document.
Editor pageQuestions engineers ask
Partially. PDFSDK is a browser-based React SDK that turns a loaded PDF template or seed document into a new PDF: add pages and text, fill form fields, edit template content, and save the result. It does not create an empty PDF without first loading valid PDF bytes.
Still have questions? Book 30 minutes
A short call with the engineering team and a straight answer instead of a pitch