React PDF form library

Nutrient Web SDK is a JavaScript library for filling, reading, creating, and editing PDF AcroForms. It’s fully compatible with React and offers developers an API for programmatic access to PDF form objects, as well as a beautiful user interface (UI) for form filling in any React-based web app.

Try for free Launch demo

Nutrient SDKs are trusted by world’s most popular applications, including Autodesk, Disney, UBS, Dropbox, IBM, and Lufthansa. Nutrient’s powerful solutions enable seamless integration of PDF editing features into your applications, delivering reliability and efficiency to world-class enterprises.

Key capabilities

• User friendly interface — Fill forms easily with a prebuilt UI

• Programmatic access — Read, write, and modify PDF form data

• Database integration — Import/export form data seamlessly

• Signatures — Add electronic signature fields

• Custom permissions — Control user interactions with form fields

• High-performance rendering — Ensure smooth form handling in React-based web applications

Build and manage PDF forms in React

PDF forms allow users to input data digitally, replacing traditional paper forms. With Nutrient Web SDK, developers can seamlessly integrate PDF form functionality into React-based web applications, enabling form creation, filling, data extraction, and more.

This guide provides a comprehensive tutorial for working with React-based PDF forms, including code examples and best practices.

What are PDF forms?

PDF forms are interactive documents that allow users to enter data. Unlike static PDFs, these forms include fillable fields such as text boxes, checkboxes, dropdowns, and signature fields. For more information, see understanding the benefits of PDF forms.

Supported PDF form fields

Nutrient Web SDK supports various PDF form fields, including:

• Text fields (for entering text)

• Checkboxes (for multiple-choice selections)

• Radio buttons (for selecting one option)

• Push buttons (for triggering an action when clicked)

• List boxes (for choosing multiple options from a predefined list)

• Combo boxes (for choosing a single option from a predefined list)

• Signature fields (for signing PDFs)

For more information, see supported PDF form fields.

Supported data formats

PDF forms can store and retrieve data in multiple formats, including:

• XFDF (XML forms data format)

• JSON (for web applications)

For more information, see PDF form elements and data formats.

Fill PDF forms programmatically

Nutrient Web SDK offers multiple options for filling form fields programmatically, each with a different set of tradeoffs.

• Using Web SDK with Document Engine — For persisting, restoring, and synchronizing the form field values across multiple devices without needing to build it yourself.

• XFDF — For exporting to or importing from other readers.

• Instant JSON — For the most efficient way to export or import changes made.

• Manual API — For complete control over extracting and saving the values of the forms.

For example, when using Web SDK with Document Engine, when a document is opened from Document Engine, the latest form field values are immediately loaded.

PSPDFKit.load({
  container: "#pspdfkit",
  documentId: "DOCUMENT_ID_GOES_HERE",
  authPayload: { jwt: "YOUR_JWT_GOES_HERE" },
  instant: true // Sync changes between users who have same document open.
  // ...
});

For more information, see fill PDF forms programmatically.

Flatten PDF forms

Flattening a form ensures users can no longer edit the fields:

const content = await instance.exportPDF({ flatten: true });
console.log(content); // => ArrayBuffer of document with flattened form fields

For more information, see flatten dynamic PDF forms.

Add a signature field to a PDF form

You can add a signature form field, which can then be used as a placeholder for electronic signatures:

const widget = new PSPDFKit.Annotations.WidgetAnnotation({
  id: PSPDFKit.generateInstantId(),
  pageIndex: 0,
  boundingBox: new PSPDFKit.Geometry.Rect({
    left: 200,
    top: 300,
    width: 150,
    height: 75
  }),
  formFieldName: "my signature form field"
});
const formField = new PSPDFKit.FormFields.SignatureFormField({
  name: "my signature form field",
  annotationIds: new PSPDFKit.Immutable.List([widget.id])
});
await instance.create([widget, formField]);

For more information, see adding a signature field to a PDF form.

Import data into PDF forms from a database

You can populate forms with external data sources such as databases. For example, assume your backend application exposes a /profile endpoint that returns the current user’s profile information, including the first name and the last name.

If you want to prefill the first name and the last name in the document the user opens, insert the form field values into the Instant JSON object and import it when the document is opened:

// This loads the profile information from your server which, in turn, imports it from the database.
const profileResponse = await fetch(
  "https://your-server.example.com/profile"
);
const { firstName, lastName } = await profileResponse.json();
// Insert the form field values into Instant JSON.
const instantJSON = {
  format: "https://pspdfkit.com/instant-json/v1",
  formFieldValues: [
    {
      v: 1,
      type: "pspdfkit/form-field-value",
      name: "firstNameField",
      value: firstName
    },
    {
      v: 1,
      type: "pspdfkit/form-field-value",
      name: "lastNameField",
      value: lastName
    }
  ]
};
// Open a document and immediately import Instant JSON into it.
const instance = PSPDFKit.load({
  instantJSON: instantJSON /* required options */
});

For more information, see import data into PDFs from a database.

Fill PDF form fields using the built-in UI

Nutrient Web SDK provides a user-friendly form filling UI out of the box. For example, if the Form Creator component is present in your license, pressing a form field will select it and enable moving and resizing it:

instance.setViewState((viewState) =>
  viewState.set("formDesignMode", true)
);

For more information, see fill PDF form fields using viewer UI.

Extract data from PDF form fields

You can extract form data in Instant JSON or other formats:

const instantJSON = await instance.exportInstantJSON();

const formFieldValues = instantJSON.formFieldValues;
console.log(formFieldValues); // [{"name":"Form Field","type":"pspdfkit/form-field-value","v":1]

For more information, see extract data from PDF form fields.

Read PDF form fields

Retrieve form field names, types, and values programmatically:

const formFields = await instance.getFormFields();
console.log(formFields.size);

For more information, see read PDF form fields using JavaScript.

Additional PDF form functionalities

• Attach files to PDF forms — Learn how to attach a file to a PDF as an image annotation

• Add images to PDF forms — Discover how to add an image to a PDF as an image annotation

• Detect user input in PDF forms — Learn how to subscribe to form events to detect form field input

• Customize PDF form permissions — Learn how to control user interactions with form fields

• Dynamic font loading in PDF forms — Discover how to dynamically load fonts when users enter text containing characters not supported by available fonts

FAQ