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 allows 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 facilitates paperless signing and provides an easier way to create, edit, view, annotate, and sign PDF documents in your React.js applications. It’s also highly customizable: Nutrient allows you to fully modify the layout of your PDF software application based on your needs and preferences.

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)
• 15+ annotation tools
• Support for multiple file types
• Dedicated support from engineers

Nutrient has developer-friendly documentation and offers a beautiful user interface for users to edit PDF files easily. Web applications such as Autodesk, Disney, UBS, Dropbox, IBM, and Lufthansa use the Nutrient library to edit PDF documents. If you’re looking for software that enables you to create and edit PDF files effectively, Nutrient is an excellent choice.

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

Copying SDK assets to the public directory

Nutrient Web SDK loads its WebAssembly and supporting files from a local path, so you need to copy them to the public folder. Start by installing the required copy plugin:

npm install -D rollup-plugin-copy

Then, update your Vite config (vite.config.ts) to copy the SDK’s asset files during build:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import copy from "rollup-plugin-copy";

export default defineConfig({
  plugins: [
    copy({
      targets: [
        {
          src: "node_modules/@nutrient-sdk/viewer/dist/nutrient-viewer-lib",
          dest: "public/",
        },
      ],
      hook: "buildStart",
    }),
    react(),
  ],
});

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;

      // Unload any previous instance.
      NutrientViewer.unload(container);

      if (container && NutrientViewer) {
        NutrientViewer.load({
          container,
          document: "/example.pdf",
          baseUrl: `${window.location.protocol}//${
            window.location.host
          }/${import.meta.env.PUBLIC_URL ?? ""}`,
        });
      }

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

    return cleanup;
  }, []);

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

export default App;

You can also render a different file by changing the document path or making it dynamic.

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.

Adding eSignatures via the Nutrient UI

Nutrient provides a user-friendly interface that allows users to annotate, edit, and sign PDF documents. In this section, you’ll learn how to sign PDF documents using the Nutrient user interface.

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.

Adding eSignatures programmatically in React.js

Nutrient enables you to add two different kinds of signatures to PDF documents: ink and image signatures. This next part will guide you through creating these signatures and how to add a signature field to a PDF document.

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.

Open the App.jsx file and update the NutrientViewer.load() function:

NutrientViewer.load({
  // Container where Nutrient should be mounted.
  container,
  // The document to open.
  document: "/example.pdf",
  baseUrl: `${window.location.protocol}//${window.location.host}/${
    import.meta.env.PUBLIC_URL ?? ""
  }`,
}).then(function (instance) {
  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).then(function (createdAnnotations) {
    console.log(createdAnnotations);
  });
});

In the code above:

• The NutrientViewer.load() function creates an instance of Nutrient.
• NutrientViewer.Annotations.InkAnnotation creates freehand drawings, and the isSignature property must be true.
• The lines and boundingBox should be left unchanged.
• NutrientViewer.Geometry.DrawingPoint inserts ink signatures, and the boundingBox determines the position and size of the ink signature.

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.

Open the ViewerComponent.jsx file and update the NutrientViewer.load() function:

NutrientViewer.load({
  container,
  // The document to open.
  document: "/example.pdf",
  baseUrl: `${window.location.protocol}//${window.location.host}/${
    import.meta.env.PUBLIC_URL ?? ""
  }`,
}).then(async function (instance) {
  // Fetches the image via its URL.
  const request = await fetch("<image_url>"); // Replace <image_url> with the actual URL of the image you want to use as a signature.

  // Converts the image to a blob.
  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: "Image Description",
    boundingBox: new NutrientViewer.Geometry.Rect({
      left: 30,
      top: 20,
      width: 300,
      height: 150,
    }),
  });
  instance.create(annotation);
});

In the code snippet above:

• The Nutrient instance creates an image annotation that enables users to fetch images into the PDF file using a URL.

Creating signature fields in PDF documents

Nutrient allows you to create signature fields in PDF documents that enable you to add signatures to PDF documents.

Open the ViewerComponent.jsx file and update the NutrientViewer.load() function:

NutrientViewer.load({
  // Container where Nutrient should be mounted.
  container,
  // The document to open.
  document: "/example.pdf",
  // Use the public directory URL as a base URL. Nutrient will download its library assets from here.
  baseUrl: `${window.location.protocol}//${window.location.host}/${
    import.meta.env.BASE_URL
  }`,
}).then(async function (instance) {
  const widget = new NutrientViewer.Annotations.WidgetAnnotation({
    pageIndex: 0,
    boundingBox: new NutrientViewer.Geometry.Rect({
      left: 200,
      top: 200,
      width: 250,
      height: 150,
    }),
    formFieldName: "My signature form field",
    id: NutrientViewer.generateInstantId(),
  });
  const formField = new NutrientViewer.FormFields.SignatureFormField({
    name: "My signature form field",
    annotationIds: NutrientViewer.Immutable.List([widget.id]),
  });
  instance.create([widget, formField]);
});

In the code snippet above:

• You’re creating a new signature field and enabling users to sign within that signature field.

Building a signature pad in React doesn’t have to be complex, especially with the power and flexibility of 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 secure document workflow, Nutrient provides the tools to handle signatures with ease, security, and scalability.

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