React PDF Editor Component
Looking for a React PDF editor? Most options are low-level viewers that require you to build the editing UI yourself. SimplePDF gives you a full editor - text, signatures, form filling, annotations - as a single React component. No PDF.js wrangling, no canvas rendering, no toolbar assembly.
Install and use
npm install @simplepdf/react-embed-pdfimport { EmbedPDF } from '@simplepdf/react-embed-pdf';
<EmbedPDF
companyIdentifier="yourcompany"
mode="inline"
style={{ width: 900, height: 800 }}
documentURL="https://cdn.simplepdf.com/simple-pdf/assets/forms/fw4.pdf"
/>import { EmbedPDF } from '@simplepdf/react-embed-pdf';
<EmbedPDF companyIdentifier="yourcompany">
<a href="https://cdn.simplepdf.com/simple-pdf/assets/forms/fw4.pdf">
Open PDF editor
</a>
</EmbedPDF>Programmatic control
Use the useEmbed() hook to control the editor from your code: submit documents, navigate pages, select tools, detect form fields, and extract content.
import { EmbedPDF, useEmbed } from '@simplepdf/react-embed-pdf';
const Editor = () => {
const { embedRef, actions } = useEmbed();
return (
<>
<button onClick={() => actions.submit({
downloadCopyOnDevice: false
})}>
Submit
</button>
<button onClick={() => actions.selectTool('SIGNATURE')}>
Sign
</button>
<button onClick={() => actions.detectFields()}>
Detect Fields
</button>
<EmbedPDF
companyIdentifier="yourcompany"
ref={embedRef}
mode="inline"
style={{ width: 900, height: 800 }}
documentURL="https://cdn.simplepdf.com/simple-pdf/assets/forms/fw4.pdf"
/>
</>
);
};What your users can do
Fill PDF forms
Auto-detects form fields. Users fill text inputs, checkboxes, dropdowns, and radio buttons natively.
Sign documents
Draw, type, or upload a signature. Works on desktop and mobile.
Add text and annotations
Free text, highlights, stamps, and images. Renders directly on the PDF.
Submit to your backend
Completed PDFs are sent via webhook to your API, or stored in your S3/Azure bucket.
Why SimplePDF over PDF.js or react-pdf?
Complete editor, not a viewer
PDF.js and react-pdf are viewers. To edit, you need to build form inputs, signature pads, and annotation layers yourself. SimplePDF includes all of this.
White-label ready
Your logo, your colors, your domain. Configure branding from your dashboard and use programmatic control to fully white-label the editing experience.
No server required
Everything runs in the browser. No file uploads to your server, no PDF processing backend to maintain.
Maintained product
You don't maintain the editor. We handle rendering bugs, browser compatibility, and PDF spec edge cases.
SimplePDF is a great tool that was very easy to implement into our web portal. They have straight forward and clear documentation on setting it up and then plenty of resources on how to utilize it even further to fit your development environment.
Works with your stack
The React component works with Next.js (App Router and Pages Router), Remix, Vite, and Create React App. It renders as an iframe, so there are no CSS conflicts or bundle size concerns.
Got any questions?
How do I get the filled PDF back?
Configure a webhook to receive the completed PDF at your API endpoint. Or use bring-your-own-storage: S3, Azure Blob Storage, or SharePoint to have it delivered directly to your bucket.
Is the React component free?
The component is free and open-source (MIT). The free tier includes full editing with SimplePDF branding. Paid plans remove branding, add webhooks, BYOS, and white-label.
Does it work with Next.js?
Yes. The component works with both the App Router and Pages Router. It renders as an iframe, so there are no SSR hydration issues.
Can I load any PDF?
Yes. Pass a documentURL or let users upload from their device. The PDF is processed entirely in the browser - it never touches your server or ours.
What programmatic actions are available?
The useEmbed() hook gives you: submit(), goTo({ page }), selectTool(), detectFields(), removeFields(), and getDocumentContent(). All return a Promise with a typed result.