React PDF Editor Component

Add PDF editing to your React app with a single component. Your users fill, sign, and submit PDFs without leaving your app.

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.

View on GitHub

Install and use

Install

npm install @simplepdf/react-embed-pdf

Inline

Best when the editor is the primary content of the page / section

import { 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"
/>

Modal

Best when the editor is an action, not the main content

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.

useEmbed() hook

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.

Healthcare · HIPAA-compliant workflows

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.

Tyler HarrisonSoftware Developer, Centralis Health

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.

Integrations

Try it now

Install the React component and see it working in under 5 minutes.

Try the editor See pricing