Fill PDF forms programmatically using JavaScript

Nutrient Web SDK gives you several ways to fill form fields programmatically. Choose the method that matches how your application stores, imports, exports, or syncs form data.

For a cross-product overview of Web SDK, Document Engine, and DWS Viewer API forms workflows, refer to the choose the right forms workflow setup guide.

• Document Engine — For persisting, restoring, and synchronizing the form field values across multiple devices without needing to build this 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 full control over extracting and saving the values of the forms.

Document Engine

Use Document Engine operational mode to serve documents and store user changes, including form field values.

When users fill form fields with the UI or API, Document Engine stores those changes. When your application opens a document from Document Engine, Nutrient Web SDK loads the latest form field values.

If you use Instant, Nutrient Web SDK synchronizes form field changes from connected users to everyone else who has the same document open.

Load the document to use this workflow:

NutrientViewer.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.
  // ...
});

Refer to the importing using Document Engine guide for more information about this form filling method.

XFDF

Use XFDF when your application needs to export a document’s annotations and form field values as XML for use in other PDF readers.

XFDF supports interoperability with other PDF software because many tools use it as an export format for annotations and form field values. For example, you can export form field values as XFDF from a PDF viewer application and import them into Nutrient Web SDK.

Provide the XFDF file contents when you open the document to prefill form field values:

NutrientViewer.load({
  XFDF: "CONTENT_OF_XFDF_FILE",
  XFDFKeepCurrentAnnotations: false // If `true`, importing an XFDF document won't replace any existing annotations.
  // ...
});

To export XFDF, use Instance#exportXFDF to get a string that contains the XFDF document, and then save it:

const XFDF = await instance.exportXFDF();

XFDF encodes a snapshot of all annotations and form field values in the document. Instant JSON only represents the difference between the data in the file and the changes the user made. For files with many annotations and form fields, an Instant JSON payload can be much smaller than its XFDF equivalent.

Refer to the importing from XFDF guide for more information about form filling with XFDF.

Instant JSON

Instant JSON is a data format that encodes annotations, bookmarks, and form field values in a compact JSON format. With Nutrient Web SDK, you can prefill form field values by providing the Instant JSON object when you open the document:

NutrientViewer.load({
  instantJSON: theInstantJSONObject
  // ...
});

To export InstantJSON, use Instance#exportInstantJSON to get a JSON object that represents InstantJSON:

const XFDF = await instance.exportInstantJSON();

You can fill form fields with data from your database or backend application. Because Instant JSON is a documented data format, you can pull form field values from your database, assemble an Instant JSON object, and pass it to Nutrient Web SDK when opening a document. Use this approach when your application already stores the data. Refer to the importing from a database guide for more information.

Use Instant JSON to restore form field value changes from a user’s previous session. Instead of saving and loading the full document with changes, you can export the Instant JSON file when the user finishes working on the document and import it when they open the document again.

Refer to the importing from Instant JSON guide for more information about this form filling method.

Manual API

Use Instance#setFormFieldValues to fill form fields directly after loading the document. This API works in both Standalone and Document Engine deployments.

Pass an object whose keys are the fully qualified form field names and whose values are the form values you want to apply:

await instance.setFormFieldValues({
  name: "Jane Doe",
  acceptedTerms: ["Yes"],
  preferredContact: "email"
});

This approach gives you direct control over when Nutrient Web SDK applies, extracts, and saves values. For example, you can load values from your application state or backend, apply them with Instance#setFormFieldValues, and later read them with Instance#getFormFieldValues before saving or exporting the document.

Persistence depends on how you load the document:

• Standalone mode — Your application saves the updated PDF with Instance#exportPDF or persists the extracted form field values separately.
• Document Engine or Instant — The server-backed workflow persists or synchronizes form field changes.