How to create a React signature pad

What is a React.js signature pad?

A signature pad is a graphical interface that can be inserted into documents your users need to sign. It enables them to draw their signatures on a document using their mouse, electronic pens, or dedicated signing devices. It also enables saving signatures as images and vice versa.

Signature pads are used in web applications that need an applicant’s handwritten signature, such as when:

• Adding signatures to ID cards or official documents
• Signing forms, contracts, or other financial and legal documentation
• Signing bills, receipts, and invoices

Why build a React.js signature pad?

The conventional way of signing documents — using pen and paper — can be inefficient. This is especially true if you have to sign PDF documents and the recipient isn’t physically present; you then have to print, sign, and scan the document before sending it to the receiver.

Replacing signed paper documentation with an electronic signature process by adding a signature pad to your PDFs allows organizations to operate more efficiently, and it can help them save time, resources, and money.

Nutrient helps you create, edit, view, annotate, and sign PDF documents in your React.js applications. You can customize the layout based on your specific requirements.

Nutrient React.js library

We offer a commercial React.js PDF library that can easily be integrated into your web application. It has a rich set of features, including:

• A prebuilt and polished user interface (UI)
• Multiple annotation tools
• Support for various document formats
• Dedicated support from engineers

Nutrient includes comprehensive documentation and a user interface for PDF editing and annotation.

Requirements

• Node.js(opens in a new tab) installed on your computer.
• A code editor of your choice.
• A package manager compatible with npm.

Creating a new React project

Use vite(opens in a new tab) to scaffold out a simple React application:

npm create vite@latest nutrient-react-example -- --template react
cd nutrient-react-example

Install Nutrient Web SDK

Next, install the @nutrient-sdk/viewer package:

npm i @nutrient-sdk/viewer

pnpm add @nutrient-sdk/viewer

yarn add @nutrient-sdk/viewer

CSS setup requirements

For new Vite projects, remove conflicting CSS from your src/index.css file:

/* src/index.css - Remove these properties from body */
body {
  /* DELETE: */
  display: flex;
  /* DELETE: */
  place-items: center;
}

The default Vite React template includes CSS that interferes with container dimensions. Removing these properties ensures the PDF viewer container renders properly.

Displaying a PDF

Now that everything is set up, you’ll render a PDF using the Nutrient SDK.

Basic usage in App.tsx:

import { useEffect, useRef } from "react";

function App() {
  const containerRef = useRef(null);

  useEffect(() => {
    const container = containerRef.current;
    let cleanup = () => {};

    (async () => {
      const NutrientViewer = (await import("@nutrient-sdk/viewer")).default;

      // Ensure there's only one `NutrientViewer` instance.
      NutrientViewer.unload(container);

      if (container && NutrientViewer) {
        NutrientViewer.load({
          container,
          document: "https://www.nutrient.io/downloads/nutrient-web-demo.pdf",
        });
      }

      cleanup = () => {
        NutrientViewer.unload(container);
      };
    })();

    return cleanup;
  }, []);

  return <div ref={containerRef} style={{ height: "100vh", width: "100vw" }} />;
}

export default App;

Key points about the code above:

• NutrientViewer.unload() ensures any existing instance is cleaned up before loading a new one.
• NutrientViewer.load() is called without await — it loads asynchronously in the background.
• The cleanup function in useEffect ensures proper unloading when the component unmounts.
• It uses a publicly accessible PDF for testing.

To use your own PDF file, place it in the public folder (e.g. public/example.pdf) and change the document path to "/example.pdf".

Once everything is configured, start your app:

npm run dev

You’ll now see the Nutrient Web SDK UI rendering your PDF inside the browser!

Note that because Nutrient is a commercial product, you’ll see a Nutrient Web SDK evaluation notice on the document. To get a license key, contact Sales.

1. Adding eSignatures via the Nutrient UI

Users can annotate, edit, and sign PDF documents through the Nutrient interface. This section shows how to sign PDF documents using the UI.

1. In the Nutrient web interface, click the icon with the sign symbol.
2. Sign on the dialog box that appears. You can change the color of the pen, and Nutrient also allows you to draw your signature and insert an image or text as your signature.
3. You can then resize and change the position of the signature.

Next, you’ll learn how to sign documents programmatically in React.js.

2. Adding eSignatures programmatically in React.js

You can add two types of signatures to PDF documents: ink and image signatures. This section covers creating both signature types and adding signature fields to PDFs.

Adding ink signatures in a React.js web application

Ink signatures are similar to signatures done using a pen on paper. In this use case, Nutrient provides a signature pad where you can draw your signature.

Update the App.tsx file to add an ink signature programmatically:

1
import { useEffect, useRef } from "react";
53 collapsed lines
2

3
function App() {
4
  const containerRef = useRef(null);
5

6
  useEffect(() => {
7
    const container = containerRef.current;
8
    let cleanup = () => {};
9

10
    (async () => {
11
      const NutrientViewer = (await import("@nutrient-sdk/viewer")).default;
12

13
      NutrientViewer.unload(container);
14

15
      if (container && NutrientViewer) {
16
        const instance = await NutrientViewer.load({
17
          container,
18
          document: "/example.pdf",
19
        });
20

21
        const annotation = new NutrientViewer.Annotations.InkAnnotation({
22
          pageIndex: 0,
23
          isSignature: true,
24
          lines: NutrientViewer.Immutable.List([
25
            NutrientViewer.Immutable.List([
26
              new NutrientViewer.Geometry.DrawingPoint({ x: 5, y: 5 }),
27
              new NutrientViewer.Geometry.DrawingPoint({ x: 95, y: 95 }),
28
            ]),
29
            NutrientViewer.Immutable.List([
30
              new NutrientViewer.Geometry.DrawingPoint({ x: 95, y: 5 }),
31
              new NutrientViewer.Geometry.DrawingPoint({ x: 5, y: 95 }),
32
            ]),
33
          ]),
34
          boundingBox: new NutrientViewer.Geometry.Rect({
35
            left: 0,
36
            top: 0,
37
            width: 100,
38
            height: 100,
39
          }),
40
        });
41

42
        const createdAnnotations = await instance.create(annotation);
43
        console.log(createdAnnotations);
44
      }
45

46
      cleanup = () => {
47
        NutrientViewer.unload(container);
48
      };
49
    })();
50

51
    return cleanup;
52
  }, []);
53

54
  return <div ref={containerRef} style={{ height: "100vh", width: "100vw" }} />;
55
}
56

57
export default App;

In the code above:

• NutrientViewer.Annotations.InkAnnotation creates an ink signature annotation.
• isSignature: true marks this as a signature (required for signature functionality).
• lines defines the drawing points that create the signature’s shape (an “X” in this example).
• boundingBox determines the position and size of the signature on the page.
• You can customize the coordinates in DrawingPoint and boundingBox to create different signature shapes and positions.

Adding image signatures in a React.js web application

In this section, you’ll learn how to add images as signatures on PDF documents using Nutrient in a React.js web application.

Update the App.tsx file to add an image signature:

1
import { useEffect, useRef } from "react";
49 collapsed lines
2

3
function App() {
4
  const containerRef = useRef(null);
5

6
  useEffect(() => {
7
    const container = containerRef.current;
8
    let cleanup = () => {};
9

10
    (async () => {
11
      const NutrientViewer = (await import("@nutrient-sdk/viewer")).default;
12

13
      NutrientViewer.unload(container);
14

15
      if (container && NutrientViewer) {
16
        const instance = await NutrientViewer.load({
17
          container,
18
          document: "/example.pdf",
19
        });
20

21
        // Fetches the image via its URL.
22
        const request = await fetch("<image_url>"); // Replace <image_url> with the actual URL.
23
        const blob = await request.blob();
24
        const imageAttachmentId = await instance.createAttachment(blob);
25

26
        const annotation = new NutrientViewer.Annotations.ImageAnnotation({
27
          pageIndex: 0,
28
          isSignature: true,
29
          contentType: "image/jpeg",
30
          imageAttachmentId,
31
          description: "Image Description",
32
          boundingBox: new NutrientViewer.Geometry.Rect({
33
            left: 30,
34
            top: 20,
35
            width: 300,
36
            height: 150,
37
          }),
38
        });
39

40
        await instance.create(annotation);
41
      }
42

43
      cleanup = () => {
44
        NutrientViewer.unload(container);
45
      };
46
    })();
47

48
    return cleanup;
49
  }, []);
50

51
  return <div ref={containerRef} style={{ height: "100vh", width: "100vw" }} />;
52
}
53

54
export default App;

In the code snippet above:

• The code fetches an image from a URL, converts it to a blob, and creates an attachment.
• ImageAnnotation with isSignature: true creates an image-based signature.
• The boundingBox controls where the image signature appears on the page.

Creating signature fields in PDF documents

Signature fields are interactive areas where users can click to add their signature. This is useful for forms and documents that require signatures.

Update the App.tsx file to create a signature field:

1
import { useEffect, useRef } from "react";
47 collapsed lines
2

3
function App() {
4
  const containerRef = useRef(null);
5

6
  useEffect(() => {
7
    const container = containerRef.current;
8
    let cleanup = () => {};
9

10
    (async () => {
11
      const NutrientViewer = (await import("@nutrient-sdk/viewer")).default;
12

13
      NutrientViewer.unload(container);
14

15
      if (container && NutrientViewer) {
16
        const instance = await NutrientViewer.load({
17
          container,
18
          document: "/example.pdf",
19
        });
20

21
        const widget = new NutrientViewer.Annotations.WidgetAnnotation({
22
          pageIndex: 0,
23
          boundingBox: new NutrientViewer.Geometry.Rect({
24
            left: 200,
25
            top: 200,
26
            width: 250,
27
            height: 150,
28
          }),
29
          formFieldName: "My signature form field",
30
          id: NutrientViewer.generateInstantId(),
31
        });
32

33
        const formField = new NutrientViewer.FormFields.SignatureFormField({
34
          name: "My signature form field",
35
          annotationIds: NutrientViewer.Immutable.List([widget.id]),
36
        });
37

38
        await instance.create([widget, formField]);
39
      }
40

41
      cleanup = () => {
42
        NutrientViewer.unload(container);
43
      };
44
    })();
45

46
    return cleanup;
47
  }, []);
48

49
  return <div ref={containerRef} style={{ height: "100vh", width: "100vw" }} />;
50
}
51

52
export default App;

In the code snippet above:

• WidgetAnnotation creates the visual signature field box on the page,
• SignatureFormField defines the form field properties,
• formFieldName links the widget to the form field,
• Users can click the signature field to open the signature pad and add their signature,

Conclusion

Building a signature pad in React is straightforward with Nutrient Web SDK.

In this tutorial, you learned how to:

• Set up a React project with Vite
• Integrate Nutrient’s viewer to load and display PDF documents
• Add ink and image-based signatures programmatically
• Create signature fields that users can interact with inside the browser

Whether you’re building a paperless onboarding experience, a contract-signing portal, or a document workflow, Nutrient provides tools to handle signatures securely.

Ready to go further?

• Explore advanced form fields
• Learn to fill and sign PDF forms

Want to see it in action? Check out our interactive demos or start a free trial to build your own signature-enabled document app today.

If you have questions or run into any issues, our Support team is always here to help.

FAQ