JavaScript PDF library

Nutrient Web SDK is an enterprise-grade JavaScript library designed for viewing, annotating, and editing PDFs directly in web browsers. It offers a comprehensive set of features for working with PDF documents in web applications.

Try for free Launch demo

Key capabilities

Browser support

Nutrient Web SDK is compatible with the latest versions of popular browsers, including Google Chrome, Mozilla Firefox, Safari, Microsoft Edge, and Firefox ESR. For a complete browser compatibility list, visit our browser support page.

Framework support

Nutrient Web SDK is compatible with all JavaScript frameworks, including React, Angular, Vue, Svelte, Electron, Ruby on Rails, and TypeScript. It just needs a DOM container to append the viewer, which is possible with any framework.

Integration

Nutrient Web SDK is compatible with SharePoint, Microsoft Teams, Microsoft OneDrive, and Salesforce.

Operational modes

Nutrient Web SDK can run locally in the browser or work together with Document Engine — either self-hosted or managed — to offload document storing, rendering, and editing. See the full comparison between the two operational modes here.

Open and view PDFs

To load PDFs, use the load method, which takes a Configuration object as its parameter. This object specifies where the document is loaded on the page, the path to the source document, the license key, and more. For more information, see the guides on loading a document.

PSPDFKit.load({
  container: "#pspdfkit",
  document: "source.pdf",
  licenseKey: "YOUR_LICENSE_KEY"
});

Integrate AI Assistant with Nutrient Web SDK

To integrate AI Assistant with Nutrient Web SDK, pass the AI Assistant configuration and a generated JSON Web Token (JWT) to PSPDFKit.load(). For more information, refer to our guide on AI Assistant integration with Nutrient Web SDK.

PSPDFKit.load({
  aiAssistant: {
    sessionId: <sessionId>,
    jwt: <jwt>,
    backendUrl: <backendUrl>,
  },
  ...
});

Create PDF annotations

Annotations can be created using annotation constructors and the Instance#create endpoint. This will return a promise that will resolve to created annotations with generated IDs set. Once annotations have been edited, they’ll need to be persisted. This is done by saving them. Save them to external storage or embed them into the document. They can also be exported to [Instant JSON](/guides/web/importing-exporting/xfdf-support/>XFDF</a> or <a href=). For more information, see our guide on creating PDF annotations using JavaScript.

const { List } = PSPDFKit.Immutable;
const { DrawingPoint, Rect } = PSPDFKit.Geometry;
const { InkAnnotation } = PSPDFKit.Annotations;

PSPDFKit.load(configuration).then(async (instance) => {
  var annotation = new InkAnnotation({
    pageIndex: 0,
    boundingBox: new Rect({ width: 100, height: 100 }),
    lines: List([
      List([
        new DrawingPoint({ x: 0, y: 0 }),
        new DrawingPoint({ x: 100, y: 100 })
      ])
    ])
  });

  const [createdAnnotation] = await instance.create(annotation);
  console.log(createdAnnotation.id); // => '01BS964AM5Z01J9MKBK64F22BQ'
});

Add a text form field

To create a form field, first create the form element — also known as a widget annotation. Since the form field requires a widget annotation ID when it’s created, you’ll need to generate a unique ID for your widget annotation via PSPDFKit#generateInstantId(). For more information, see our guide on how to create fillable PDF forms.

// Create a new text form field.
const widget = new PSPDFKit.Annotations.WidgetAnnotation({
  id: PSPDFKit.generateInstantId(),
  pageIndex: 0,
  formFieldName: "MyFormField",
  boundingBox: new PSPDFKit.Geometry.Rect({
    left: 100,
    top: 75,
    width: 200,
    height: 80
  })
});
const formField = new PSPDFKit.FormFields.TextFormField({
  name: "MyFormField",
  annotationIds: new PSPDFKit.Immutable.List([widget.id]),
  value: "Text shown in the form field"
});

instance.create([widget, formField]);

Perform OCR on a document

Note: OCR is available when using Nutrient Web SDK with Document Engine. To perform optical character recognition (OCR) on a document, open the document from Document Engine and apply the performOcr document operation with Instance.applyOperations. For more information, see our guide on how to perform OCR.

await instance.applyOperations([
  { type: "performOcr", language: "english", pageIndexes: "all" }
]);

Search and redact PDFs

To create redaction annotations based on specific search criteria, use PSPDFKit.Instance#createRedactionsBySearch(), which allows you to specify the search criteria, along with specifying a custom redaction annotation preset to be used when creating redactions based on search results. For more information, see our guide on searching and redacting PDFs.

const annotationIds = await instance.createRedactionsBySearch("PSPDFKit", {
  searchInAnnotations: false
});

FAQ