---
title: "Electronic PDF signature | Nutrient"
canonical_url: "https://www.nutrient.io/guides/web/samples/electronic-signatures-in-pdf/"
md_url: "https://www.nutrient.io/guides/web/samples/electronic-signatures-in-pdf.md"
last_updated: "2026-05-30T02:20:01.421Z"
description: "Learn how to add electronic signatures to PDFs and save them in local storage for seamless access. Explore our JavaScript PDF signature library for more resources."
---

# Add electronic signatures to PDFs using JavaScript

Add electronic signatures to PDFs and keep them across page refreshes by saving them in the browser’s local storage. Get additional resources by visiting our [JavaScript PDF signature library](/guides/web/signatures.md).

[Get Started](https://www.nutrient.io/sdk/web/getting-started.md)

[All Samples](https://www.nutrient.io/guides/web/samples.md)

[Download](https://www.nutrient.io/guides/web/downloads.md)

[Launch Demo](https://www.nutrient.io/demo/)

---

```js

import PSPDFKit from "@nutrient-sdk/viewer";

let instance = null;

export function load(defaultConfiguration) {
  return PSPDFKit.load({...defaultConfiguration,
    // This function gets invoked when the document is loaded and expects a list
    // of ink annotations as return value.
    populateInkSignatures() {
      // We retrieve our previously stored ink annotations from localStorage
      // and return them as a PSPDFKit.Immutable.List.
      // This will populate the signature selection for our users.
      const signatureJSON = localStorage.getItem("inkSignatures");
      const signatures = signatureJSON? JSON.parse(signatureJSON) : [];

      return PSPDFKit.Immutable.List(
        signatures.map(PSPDFKit.Annotations.fromSerializableObject)
      );
    },
    toolbarItems: defaultConfiguration.toolbarItems.reduce((acc, item) => {
      if (item.type === "export-pdf") {
        return acc.concat([
          {
            type: "custom",
            title: "Download",
            onPress: async () => {
              const pdf = await instance.exportPDF({
                flattenElectronicSignatures: true,
              });
              const blob = new Blob([pdf], { type: "application/pdf" });
              const url = URL.createObjectURL(blob);
              const a = document.createElement("a");
              a.href = url;
              a.download = "document.pdf";
              a.click();
              URL.revokeObjectURL(url);
            },
          },
        ]);
      }

      return acc.concat([item]);
    }, []),
  }).then((_instance) => {
    instance = _instance;

    // Whenever an ink signature is added, updated or deleted, we update the
    // signatures stored in localStorage.
    instance.addEventListener("inkSignatures.change", async () => {
      const signatures = await instance.getInkSignatures();
      const signaturesJSON = JSON.stringify(
        signatures.map((signature) =>
            PSPDFKit.Annotations.toSerializableObject(signature)
          ).toJS()
      );

      localStorage.setItem("inkSignatures", signaturesJSON);
    });

    return instance;
  });
}

```

This code sample is an example that illustrates how to use our SDK. Please adapt it to your specific use case.

---

## Related pages

- [Add electronic signature images to PDFs using JavaScript](/guides/web/samples/adding-image-electronic-signatures.md)
- [Customize PDF annotation tooltips using JavaScript](/guides/web/samples/custom-annotation-tooltip.md)
- [Customize PDF annotation permissions using JavaScript](/guides/web/samples/custom-annotation-permissions.md)
- [Open, view, and annotate on images using JavaScript](/guides/web/samples/annotating-images.md)
- [Add watermarks to PDFs using JavaScript example](/guides/web/samples/add-watermarks-to-pdf-javascript.md)
- [Create custom overlays on PDFs using JavaScript](/guides/web/samples/custom-overlay-items.md)
- [Disable PDF editing and annotations](/guides/web/samples/open-read-only-pdf.md)
- [Customize the PDF toolbar using JavaScript](/guides/web/samples/customized-pdf-toolbar.md)
- [View PDFs in dark mode using JavaScript](/guides/web/samples/dark-mode-pdf-viewer.md)
- [Custom HTML PDF annotations using JavaScript](/guides/web/samples/custom-annotations.md)
- [Customized Document Editor Toolbar](/guides/web/samples/customized-document-editor-toolbar.md)
- [Customizing PDF text search using JavaScript](/guides/web/samples/customized-pdf-search.md)
- [PDF form support using JavaScript](/guides/web/samples/javascript-pdf-form.md)
- [Handling password-protected PDFs in our JavaScript viewer](/guides/web/samples/password-protected-pdf.md)
- [PDF presentation mode using JavaScript](/guides/web/samples/presentation-mode.md)
- [Customizing JavaScript PDF printing modes](/guides/web/samples/pdf-printing-modes.md)
- [Open PDFs using JavaScript](/guides/web/samples/open-pdf-using-javascript.md)
- [Zoom example for our JavaScript PDF viewer](/guides/web/samples/zooming.md)
- [Edit PDFs using JavaScript](/guides/web/samples/edit-pdf-javascript.md)
- [Storing electronic signatures in the browser using JavaScript](/guides/web/samples/stored-electronic-signatures.md)
- [PDF text selection using JavaScript](/guides/web/samples/pdf-text-selection-javascript.md)
- [PDF annotation in JavaScript](/guides/web/samples/javascript-pdf-annotations.md)
- [Hide or reveal area on PDFs using JavaScript](/guides/web/samples/hide-reveal-area-in-pdf.md)
- [Collaborate on PDFs using JavaScript](/guides/web/samples/instant-pdf-collaboration.md)
- [JavaScript PDF magazine viewer](/guides/web/samples/javascript-magazine-viewer.md)
- [Digitally sign a PDF using JavaScript](/guides/web/samples/javascript-digital-signatures.md)
- [Flipbook PDF viewer using JavaScript](/guides/web/samples/flipbook.md)
- [PDF Collaboration permissions using JavaScript](/guides/web/samples/collaboration-permissions.md)
- [Redact PDFs using JavaScript](/guides/web/samples/javascript-pdf-redaction.md)
- [Drag-and-drop UI in our JavaScript PDF viewer](/guides/web/samples/drag-and-drop.md)
- [Customize the UI for PDF annotations using JavaScript](/guides/web/samples/annotations-inspector.md)