---
title: "Add electronic signatures to PDFs with JavaScript | Nutrient Web SDK"
canonical_url: "https://www.nutrient.io/guides/web/signatures/adding-an-electronic-signature/"
md_url: "https://www.nutrient.io/guides/web/signatures/adding-an-electronic-signature.md"
last_updated: "2026-05-18T14:28:53.412Z"
description: "Learn how to add electronic signatures to PDFs with JavaScript using Nutrient Web SDK. Enable end users to draw, type, or attach a signature image effortlessly. Follow our step-by-step guide for seamless eSignature integration."
---

# 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](https://www.nutrient.io/try)

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

## Adding an electronic signature programmatically

In Nutrient Web SDK, electronic signatures are implemented as PDF [annotations](https://www.nutrient.io/guides/web/annotations/introduction-to-annotations.md), 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 [`NutrientViewer.Instance#create`](https://www.nutrient.io/api/web/NutrientViewer.Instance.html#create) method with:

   - [`NutrientViewer.Annotations.InkAnnotation`](https://www.nutrient.io/api/web/NutrientViewer.Annotations.InkAnnotation.html) for drawn signatures.
   - [`NutrientViewer.Annotations.ImageAnnotation`](https://www.nutrient.io/api/web/NutrientViewer.Annotations.ImageAnnotation.html) for image-based signatures.

2. Ensure the `isSignature` property is set to `true`.

3. Modify or remove existing signatures using:
   - [`NutrientViewer.Instance#update`](https://www.nutrient.io/api/web/NutrientViewer.Instance.html#update)

   - [`NutrientViewer.Instance#delete`](https://www.nutrient.io/api/web/NutrientViewer.Instance.html#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:

```js

const annotation = new NutrientViewer.Annotations.InkAnnotation({
	pageIndex: 0,
	isSignature: true,
	lines: NutrientViewer.Immutable.List([
		NutrientViewer.Immutable.List([
			new NutrientViewer.Geometry.DrawingPoint({ x: 5, y: 5 }),
			new NutrientViewer.Geometry.DrawingPoint({ x: 95, y: 95 }),
		]),
		NutrientViewer.Immutable.List([
			new NutrientViewer.Geometry.DrawingPoint({ x: 95, y: 5 }),
			new NutrientViewer.Geometry.DrawingPoint({ x: 5, y: 95 }),
		]),
	]),
	boundingBox: new NutrientViewer.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:

```js

const request = await fetch('https://example.com/image.jpg');
const blob = await request.blob();
const imageAttachmentId = await instance.createAttachment(blob);
const annotation = new NutrientViewer.Annotations.ImageAnnotation({
	pageIndex: 0,
	isSignature: true,
	contentType: 'image/jpeg',
	imageAttachmentId,
	description: 'Example Image Annotation',
	boundingBox: new NutrientViewer.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](https://www.nutrient.io/guides/web/forms/introduction-to-forms.md)**, 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.![Screenshot of Nutrient Web SDK toolbar with the sign button highlighted.](@/assets/guides/web/signatures/adding-an-electronic-signature/toolbar.png)

### 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.
---

## Related pages

- [Sign PDFs with certificates using JavaScript](/guides/web/signatures/using-electronic-signatures-and-digital-signatures-together.md)
- [Save and store electronic signatures in our JavaScript viewer](/guides/web/signatures/signature-storage.md)