---
title: "Enabling different eSignature modes | Nutrient SDK"
canonical_url: "https://www.nutrient.io/guides/web/signatures/customizing-the-signature-user-interface/"
md_url: "https://www.nutrient.io/guides/web/signatures/customizing-the-signature-user-interface.md"
last_updated: "2026-07-17T00:00:00.000Z"
description: "Learn how to configure available electronic signature creation modes and typing fonts for the Nutrient Web SDK signature UI."
---

# Customizing the electronic signature UI

The Electronic Signatures UI can be customized to fit your needs.

You can customize aspects such as which signature creation modes are available and in which order, and what signing fonts to offer when creating signatures by typing.

These options are set via the [`NutrientViewer.Configuration#electronicSignatures`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#.electronicSignatures) configuration option, which accepts an object with two possible properties: [`creationModes`](https://www.nutrient.io/api/web/NutrientViewer.ElectronicSignaturesConfiguration.html#creationModes) and [`fonts`](https://www.nutrient.io/api/web/NutrientViewer.ElectronicSignaturesConfiguration.html#fonts).

To replace the signature dialog instead of configuring its built-in modes, use the public [`signatures.list` slot](https://www.nutrient.io/guides/web/user-interface/ui-customization/examples/#custom-electronic-signature-ui). A full replacement covers both the saved-signatures picker and the creation view, supplies its own UI, and completes the workflow through public Instance APIs. Don’t build new customizations with private `_blocks` or `PSPDFKit.UI` internals.

### Setting available signature creation modes

`creationModes` accepts an array of `NutrientViewer.ElectronicSignatureCreationMode` members. Based on these entries, the UI will display the tabs specified in the array, respecting the order in which they were added. It defaults to `NutrientViewer.defaultElectronicSignatureCreationModes`.

Here’s an example offering Type, followed by Image, as signature creation modes:

```js

NutrientViewer.load({
	electronicSignatures: {
		creationModes: [
			NutrientViewer.ElectronicSignatureCreationMode.TYPE,
			NutrientViewer.ElectronicSignatureCreationMode.IMAGE,
		],
	},
});

```
---

## Related pages

- [Capturing electronic signatures with viewer modals](/guides/web/user-interface/signatures/electronic-signatures.md)
- [Invisible signing: Digitally sign any PDF](/guides/web/user-interface/signatures/invisible-signing.md)
- [Customizing electronic signature fonts](/guides/web/user-interface/signatures/signature-fonts.md)
- [Customizing the digital signature validation status](/guides/web/user-interface/signatures/validation-status.md)