Signature Maker JS

Web component that lets users draw, type or upload their signature and returns it as a PNG.

Live demo · Documentation · React · Vue

Installation

npm install @docuseal/signature-maker-js
# or
yarn add @docuseal/signature-maker-js

import '@docuseal/signature-maker-js'

Importing the package registers the <signature-maker> element. The import is safe in server-side rendered apps. Without a bundler, load it from a CDN:

<script src="https://cdn.jsdelivr.net/npm/@docuseal/signature-maker-js@1/dist/index.cjs.js"></script>

Usage

No JavaScript needed: the Submit button downloads the signature as a PNG.

<signature-maker data-download-on-save="true"></signature-maker>

Handle the signature when the user clicks Submit:

<signature-maker id="signatureMaker"></signature-maker>

<script>
  signatureMaker.addEventListener('save', (e) => {
    fetch('/save-signature', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ file: e.detail.base64 }),
    })
  })
</script>

Embed in a form without the Submit button. A nested file input receives the PNG on every change:

<form method="POST" action="/submit-form">
  <input name="name" type="text">
  <signature-maker data-with-submit="false">
    <input type="file" name="signature">
  </signature-maker>
  <button type="submit">Submit</button>
</form>

Restyle with CSS classes and translate the labels. A full DaisyUI example:

<signature-maker
  class="block my-8"
  data-save-button-text="Télécharger"
  data-undo-button-text="Annuler"
  data-clear-button-text="Clair"
  data-draw-type-button-text="Dessiner"
  data-text-type-button-text="Type"
  data-upload-type-button-text="Télécharger"
  data-text-input-placeholder="Tapez votre signature ici"
  data-type-buttons-container-class="flex gap-2 mb-4 justify-center"
  data-draw-type-button-class="flex items-center justify-center py-3 w-40 uppercase border-neutral-focus space-x-2 border rounded-3xl cursor-pointer hover:bg-neutral hover:text-white hover:font-semibold"
  data-draw-type-button-active-class="bg-neutral text-white font-semibold"
  data-text-type-button-class="flex items-center justify-center py-3 w-40 uppercase border-neutral-focus space-x-2 border rounded-3xl cursor-pointer hover:bg-neutral hover:text-white hover:font-semibold"
  data-text-type-button-active-class="bg-neutral text-white font-semibold"
  data-upload-type-button-class="flex items-center justify-center py-3 w-40 uppercase border-neutral-focus space-x-2 border rounded-3xl cursor-pointer hover:bg-neutral hover:text-white hover:font-semibold"
  data-upload-type-button-active-class="bg-neutral text-white font-semibold"
  data-text-input-class="input mb-4 input-bordered bg-white text-2xl w-full h-14 rounded-2xl"
  data-canvas-class="bg-white border border-base-300 rounded-2xl w-full"
  data-undo-button-class="btn btn-outline btn-sm font-medium"
  data-clear-button-class="btn btn-outline btn-sm font-medium"
  data-save-button-class="btn btn-neutral text-white text-base w-full"
>
</signature-maker>

Events

The element also exposes enableDrawPanel(), enableTextPanel(), enableUploadPanel() and the underlying signature_pad instance as pad. TypeScript declarations are included; the payload type is SignatureDetail:

import type { SignatureDetail } from '@docuseal/signature-maker-js'

el.addEventListener('save', (e: CustomEvent<SignatureDetail>) => console.log(e.detail.base64))

Attributes

Behavior:

Labels: data-save-button-text, data-undo-button-text, data-clear-button-text, data-draw-type-button-text, data-text-type-button-text, data-upload-type-button-text, data-text-input-placeholder.

Styles: every element below accepts data-<element>-class and data-<element>-style. A class replaces the default inline styles, a style overrides them. State variants are appended to the base class or style.

Example: data-draw-type-button-class="tab" plus data-draw-type-button-active-class="tab-active" renders class="tab tab-active" while Draw is selected.

License

MIT