PDF signing SDK for your React app
Build a PDF signing workflow in your own React UI with a browser-based PDF signing component. Create signature fields, place an electronic signature, collect signer details, and save the signed PDF.
Works with vanilla JavaScript and most popular frameworks
Building blocks for a React PDF signing experience
PDFSDK handles PDF rendering and document state. Your application owns signature capture, identity, and the PDF signing workflow.
Create signature fields
Add standard AcroForm signature fields to an existing PDF from code, or arm the addWidget tool with editable forms and let a document builder place them on the page.
- useWidgetsCreate()
- addWidget tool
Bring your own signature UI
Build your own PDF signature component: capture a drawn signature on a canvas, render a typed signature, or accept an uploaded image. Pass the resulting Blob to the SDK instead of adopting a vendor signing modal.
- stageImage()
Place a visible e-signature
Arm the addImage tool with the staged signature. The signer’s next click places it on the PDF as an image-backed Stamp annotation, a separate annotation over the field rather than a value written into it.
- stageImage()
- useSetInteractionMode()
Adjust the signature on the page
Select, move, resize, duplicate, or delete the placed signature with the same interactions you’d use in a React PDF editor.
- useMoveSelection()
- useDuplicateSelection()
- useDeleteSelection()
Fill the rest of the agreement
Keep names, dates, approvals, checkboxes, and dropdowns in real AcroForm fields, so values stay structured form data when the PDF is saved.
- useWidgets()
- useWidgetValue()
Read the signature state of a field
For existing certificate-signed fields, isCryptoSigned mirrors the loaded document. It tells you the field was signed, not whether the certificate is valid, and the SDK never signs.
- useWidgetsGetter()
- isCryptoSigned
Lock the document around the signer
Page text stays read-only, and form fields stay interactive while the signature image is placed. Switching the content policy at runtime moves the same document between builder and signer roles. Placing an image needs editable annotations, and that permission covers every annotation in the document.
- CONTENT_POLICY_PRESET
- useSetInteractionMode()
Save a signed PDF
Serialize the signature field, form values, and visible signature into PDF bytes in the browser. Then download the file or send it through your own storage or signing pipeline.
- useDocumentSaving()
From an unsigned PDF to your PDF signing workflow
PDF SDK for React supplies the PDF engine, fields, placement tools, and save path. Your React components supply the capture UI and the signing workflow around it.
Load the PDF in a signer-safe policy
Start from the PDF_VIEWER preset: page text stays read-only and form fields stay interactive. Add editable annotations, which the addImage tool needs to place the signature image. That permission is document-wide, not scoped to the signature.
import { useEffect } from 'react';
import {
CONTENT_POLICY_PRESET,
PdfProviders,
Viewport,
useLoadPdf,
} from '@sdk-pdf/react';
import '@sdk-pdf/react/style.css';
const signingPolicy = {
...CONTENT_POLICY_PRESET.PDF_VIEWER,
annotations: 'editable',
} as const;
const selectTool = { type: 'select' } as const;
type Props = { file: Uint8Array };
function Signer({ file }: Props) {
const [state, loadPdf] = useLoadPdf();
useEffect(() => {
void loadPdf(file);
}, [file, loadPdf]);
if (state.status !== 'ready') return null;
return (
<div style={{ height: '100vh' }}>
<Viewport />
</div>
);
}
export function App({ file }: Props) {
return (
<PdfProviders
initialInteractionTool={selectTool}
initialContentPolicy={signingPolicy}
>
<Signer file={file} />
</PdfProviders>
);
}
Check PDF signature status, then hand off the file
A signature field’s isCryptoSigned mirrors the loaded document, and the SDK never signs. prepareDocument returns the PDF bytes for your certificate-signing endpoint.
import { useWidgetsGetter } from '@sdk-pdf/react';
export function useSignatureStates() {
const getWidgets = useWidgetsGetter();
return async () => {
const widgets = await getWidgets();
return widgets.flatMap((widget) =>
widget.widgetType === 'signature'
? { fieldName: widget.fieldName, isCryptoSigned: widget.isCryptoSigned }
: [],
);
};
}A browser-native PDF signing library for React
React PDF signing runs entirely in the tab: PDF parsing, rendering, field creation, signature placement, and saving. Identity, audit evidence, and private-key operations stay in the systems you choose.
'use client';
import dynamic from 'next/dynamic';
const Signer = dynamic(() => import('./signer'), { ssr: false });
export default function Page() {
return <Signer />;
}- Framework
- React 19, with react and react-dom as peer dependencies
- Module format
- ESM only; use a bundler such as Vite or Next.js
- Runtime
- Browser only; use a client component with ssr: false in Next.js
- Bundle
- 277 KB gzipped; CJK character maps are code-split and lazy
- Assets to host
- None. No worker directory, WASM, or font bundle
- Signature capture
- Bring a canvas, typed-signature renderer, or upload control that produces an image Blob
- Cryptographic signing
- Not included. Connect your certificate or remote-signing service
- Strict Mode
- Off for now. The simulated unmount kills the engine
- Encrypted files
- Pass { password } to loadPdf. RC4, AES-128, and AES-256
- File format
- PDF only
PDFSDK vs other PDF signing libraries
Some PDF signing libraries capture a signature, some modify PDF bytes, and some apply a certificate. PDFSDK covers the interactive React PDF viewer and the visible e-signature flow.
| Library | Visible e-signature | Signature fields | Certificate signing | PDF viewer | Runtime |
|---|---|---|---|---|---|
| Image in your UI | Create and read | No | Included | Browser, React | |
| Signature Pad | Captures handwriting | No | No | No | Browser |
| pdf-lib | Draw image manually | No signing workflow | No | No | Browser or Node.js |
| @signpdf | No signing UI | Placeholder helpers | P12 signing | No | Node.js |
Build the rest of the document workflow
PDF Forms SDK
Create and fill the names, dates, approvals, and checkboxes that surround a signature.
Explore PDF formsReact PDF Viewer
Embed the document, navigation, and form experience inside your own React layout.
Explore the viewerReact PDF Editor
Prepare the agreement, update its text, and place fields before it reaches the signer.
Explore PDF editingQuestions engineers ask
PDFSDK supports visible electronic signatures: your application captures or creates a signature image, and the SDK places it on the PDF and saves it into the file. It also creates and reads standard PDF signature fields. It does not currently create certificate-based digital signatures.
Still have questions? Book 30 minutes
A short call with the engineering team and a straight answer instead of a pitch