Add electronic signatures to PDFs with JavaScript

This guide explains how to add an electronic signature (eSignature) to a PDF document on web browser using Nutrient Web SDK, both through the built-in user interface (UI) and programmatically.

Try for Free Launch Demo

Adding an electronic signature programmatically

In Nutrient Web SDK, electronic signatures are implemented as PDF annotations, commonly referred to as signature annotations.

Electronic signatures can be either ink annotations (hand-drawn) or image annotations (attached signature image from device). To create an eSignature programmatically:

1. Use the PSPDFKit.Instance#create method with:

   • PSPDFKit.Annotations.InkAnnotation for drawn signatures.

   • PSPDFKit.Annotations.ImageAnnotation for image-based signatures.

2. Ensure the isSignature property is set to true.

3. Modify or remove existing signatures using:

   • PSPDFKit.Instance#update

   • PSPDFKit.Instance#delete

Licensing requirements for signature annotations

Creating, updating, and deleting signature annotations requires a license that includes either the Annotations component or the Electronic Signatures component. If your license includes only the Electronic Signatures component (without the Annotations component), modifications are restricted to signature annotations exclusively. Any attempt to modify non-signature ink or image annotations (isSignature = false) or other annotation types will be disallowed.

Creating an ink signature

To create an ink signature programmatically, use to the following code snippet:

const annotation = new PSPDFKit.Annotations.InkAnnotation({
	pageIndex: 0,
	isSignature: true,
	lines: PSPDFKit.Immutable.List([
		PSPDFKit.Immutable.List([
			new PSPDFKit.Geometry.DrawingPoint({ x: 5, y: 5 }),
			new PSPDFKit.Geometry.DrawingPoint({ x: 95, y: 95 }),
		]),
		PSPDFKit.Immutable.List([
			new PSPDFKit.Geometry.DrawingPoint({ x: 95, y: 5 }),
			new PSPDFKit.Geometry.DrawingPoint({ x: 5, y: 95 }),
		]),
	]),
	boundingBox: new PSPDFKit.Geometry.Rect({
		left: 0,
		top: 0,
		width: 100,
		height: 100,
	}),
});

instance.create(annotation);

Creating an image signature

To create an image signature programmatically, use to the following code snippet:

const request = await fetch('https://example.com/image.jpg');
const blob = await request.blob();
const imageAttachmentId = await instance.createAttachment(blob);
const annotation = new PSPDFKit.Annotations.ImageAnnotation({
	pageIndex: 0,
	isSignature: true,
	contentType: 'image/jpeg',
	imageAttachmentId,
	description: 'Example Image Annotation',
	boundingBox: new PSPDFKit.Geometry.Rect({
		left: 10,
		top: 20,
		width: 150,
		height: 150,
	}),
});

instance.create(annotation);

Using the built-in UI

If you’re using the SDK with Forms, end users can initiate the signature creation modal by tapping a signature form field within the document. If no signature form field is present, end users can manually add a signature using the signature tool button.

The signature tool button is available in the toolbar for quick access.

Signature creation modal view

When the signature creation modal view is displayed, end users can add a signature using one of three methods:

• Draw — End users can create a handwritten signature using a mouse or touchpad.

• Attach an image — End users can attach an existing signature image from their device.

• Type — End users can enter their signature as text using a chosen font style.

End users can attach an existing signature image from their device. If the hardware supports it, they can also capture a photo of their handwritten signature on paper for a digital scan. This option is ideal when signing on a device with easy access to stored files.

End users can enter their name and select from a predefined set of font-based signature styles. This method ensures accessibility and is fully compatible with:

• Screen readers such as VoiceOver, TalkBack, NVDA, and JAWS.

• Assistive technologies such as Switch Control on Mac and iOS.

By default, Nutrient provides four signature styles, and you can customize the available options by defining a list of preferred fonts.

Color options

For both the Draw and Type options, end users can choose between black and two shades of blue to ensure the signature remains distinguishable from the document background.