Embedded Signature Maker

Home
Embedded Signature Maker

Signing Form Form Builder Signature Maker

This component allows you to seamlessly add drawing signature functionality to your website or mobile app. It supports JS+HTML, Vue and React.

JavaScript
React
Vue

Copy

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

<script>
  window.signatureMaker.addEventListener('change', (e) => {
    if (e.detail.base64) {
      fetch('/background-save-signature', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ file: e.detail.base64 }),
      });
    } else {
      console.log('No signature to save');
    }
  })
</script>

View LIVE DEMO

Attributes

data-download-on-save optional Boolean

Set `false` to disable downloading the signature image on save. It's useful when you want to handle the image data yourself.

Default: false

data-with-typed optional Boolean

Set `false` to disable text signature input panel.

Default: true

data-with-drawn optional Boolean

Set `false` to disable drawing signature panel.

Default: true

data-with-upload optional Boolean

Set `false` to disable uploading signature image panel.

Default: true

data-with-color-select optional Boolean

Set `false` to disable color selection. Only black color will be available.

Default: true

data-with-submit optional Boolean

Set `false` to disable the submit button. Any changes will be available as a base64 string in the `change` event. Custom event 'save' will be triggered on clicking the submit button.

Default: true

data-save-button-text optional String

Default: Sabmit

data-control-buttons-container-class optional String

Custom CSS class for the control buttons container.

Example: flex gap-2

data-control-buttons-container-style optional String

Custom CSS styles for the control buttons container. Default CSS styles will be disabled

Default: display: flex; align-items: center; justify-content: space-between; text-align: center; margin: 1rem 0;

data-save-button-class optional String

Custom CSS class for the save button

Example: btn btn-neutral text-white text-base w-full

data-save-button-style optional String

Custom CSS styles for the save button

Default: color: #ffffff; font-family: ui-sans-serif, system-ui, sans-serif font-size: 16px; font-weight: 600; line-height: 24px; padding: 0px 16px; text-transform: uppercase; background-color: #222222; cursor: pointer; align-items: center; border-radius: 8px; gap: 8px; display: inline-flex; flex-shrink: 0; flex-wrap: wrap; height: 48px; justify-content: center; outline-color: #222222; text-align: center; text-decoration-line: none; width: 100%; border: 1px solid #222222;

data-save-button-disabled-class optional String

Custom CSS class for the disabled save button.

Example: btn-disabled

data-save-button-disabled-style optional String

Custom CSS styles for the disabled save button.

Default: background-color: #D3D3D3; color: #808080; cursor: not-allowed; border: 0;

data-undo-button-text optional String

Default: Undo

data-undo-button-class optional String

Custom CSS class for the undo button.

Example: btn btn-outline btn-sm font-medium

data-undo-button-style optional String

Custom CSS styles for the undo button.

Default: color: #222222; background-color: transparent; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 14px; font-weight: 500; line-height: 14px; padding: 0px 12px; text-transform: uppercase; appearance: button; cursor: pointer; align-items: center; border-radius: 8px; gap: 8px; display: inline-flex; flex-shrink: 0; flex-wrap: wrap; height: 32px; justify-content: center; outline-color: #222222; text-align: center; border: 1px solid #222222;

data-clear-button-text optional String

Custom text for the clear button.

Default: Clear

data-clear-button-class optional String

Custom CSS class for the clear button.

Example: btn btn-outline btn-sm font-medium

data-clear-button-style optional String

Custom CSS styles for the clear button.

data-text-input-placeholder optional String

Custom placeholder text for the text input field.

Default: Type signature here

data-text-input-class optional String

Custom CSS class for the text input field.

Example: input mb-4 input-bordered bg-white text-2xl w-full h-14 rounded-2xl

data-text-input-style optional String

Custom CSS styles for the text input field.

Default: color: #222222; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 32px; margin: 0px 0px 16px; padding: 0px 16px; background-color: #ffffff; border-radius: 8px; flex-shrink: 1; height: 56px; outline: #222222 none 0px; outline-offset: 0px; width: 100%; text-align: start; border: 1px solid #D3D3D3;

data-canvas-class optional String

Custom CSS class for the canvas element.

Example: bg-white border border-base-300 rounded-2xl w-full

data-canvas-style optional String

Custom CSS styles for the canvas element.

Default: display: block; vertical-align: middle; width: 100%; border-radius: 8px; background-color: #ffffff; padding: 1px; touch-action: none; user-select: none; text-align: center; line-height: 24px; border: 1px solid #D3D3D3;

data-type-buttons-container-class optional String

Custom CSS class for the type buttons container.

Example: flex gap-2 mb-4 justify-center

data-type-buttons-container-style optional String

Custom CSS styles for the type buttons container.

Default: margin-bottom: 1rem; display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem;

data-draw-type-button-text optional String

Custom text for the draw type button.

Default: Draw

data-draw-type-button-class optional String

Custom CSS class for the draw type button.

Example: 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-style optional String

Custom CSS styles for the draw type button.

Default: color: #222222; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; padding: 0px 40px; text-transform: uppercase; background-color: transparent; cursor: pointer; align-items: center; border-radius: 8px; gap: 8px; display: inline-flex; flex-shrink: 0; flex-wrap: wrap; height: 48px; justify-content: center; outline-color: #222222; text-align: center; border: 1px solid #222222;

data-draw-type-button-active-class optional String

Custom CSS class for the active draw type button.

Example: bg-neutral text-white font-semibold

data-draw-type-button-active-style optional String

Custom CSS styles for the active draw type button.

Default: color: #fff; background-color: #222222; font-weight: 500;

data-text-type-button-text optional String

Custom text for the text type button.

Default: Type

data-text-type-button-class optional String

Custom CSS class for the text type button.

Example: 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-style optional String

Custom CSS styles for the text type button.

data-text-type-button-active-class optional String

Custom CSS class for the active text type button.

Example: bg-neutral text-white font-semibold

data-text-type-button-active-style optional String

Custom CSS styles for the active text type button.

Default: color: #fff; background-color: #222222; font-weight: 500;

data-upload-type-button-text optional String

Custom text for the upload type button.

Default: Type

data-upload-type-button-class optional String

Custom CSS class for the upload type button.

Example: 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-style optional String

Custom CSS styles for the upload type button.

data-upload-type-button-active-class optional String

Custom CSS class for the active upload type button.

Example: bg-neutral text-white font-semibold

data-upload-type-button-active-style optional String

Custom CSS styles for the active upload type button.

Default: color: #fff; background-color: #222222; font-weight: 500;

data-font-url optional String

Custom font URL to be used for the text signature input panel.

Default: https://cdn.jsdelivr.net/npm/@fontsource/dancing-script/files/dancing-script-latin-400-normal.woff

Callbacks

change optional Event type

Custom event to be triggered every time a change to the signature is made.

Example: document.querySelector('signature-maker').addEventListener('change', (e) => e.detail)

save optional Event type

Custom event to be triggered on saving changes of the signature. data-with-submit attribute should be enabled to trigger this event.

Example: document.querySelector('signature-maker').addEventListener('save', (e) => e.detail)

Copy

import React from 'react'
import { SignatureMaker } from '@docuseal/signature-maker-react'

export function App() {
  return (
    <div className="app">
      <SignatureMaker
        onSave={(data) => console.log(data)}
        onChange={(data) => console.log(data)}
      />
    </div>
  );
}

View LIVE DEMO

Attributes

downloadOnSave optional Boolean

Set `false` to disable downloading the signature image on save. It's useful when you want to handle the image data yourself.

Default: false

withTyped optional Boolean

Set `false` to disable text signature input panel.

Default: true

withDrawn optional Boolean

Set `false` to disable drawing signature panel.

Default: true

withUpload optional Boolean

Set `false` to disable uploading signature image panel.

Default: true

withColorSelect optional Boolean

Set `false` to disable color selection. Only black color will be available.

Default: true

withSubmit optional Boolean

Set `false` to disable the submit button. Any changes will be available as a base64 string in the `change` event. Custom event 'save' will be triggered on clicking the submit button.

Default: true

saveButtonText optional String

Default: Submit

controlButtonsContainerClass optional String

Custom CSS class for the control buttons container.

Example: flex gap-2

controlButtonsContainerStyle optional String

Custom CSS styles for the control buttons container. Default CSS styles will be disabled

Default: display: flex; align-items: center; justify-content: space-between; text-align: center; margin: 1rem 0;

saveButtonClass optional String

Custom CSS class for the save button

Example: btn btn-neutral text-white text-base w-full

saveButtonStyle optional String

Custom CSS styles for the save button

Default: color: #ffffff; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 16px; font-weight: 600; line-height: 24px; padding: 0px 16px; text-transform: uppercase; background-color: #222222; cursor: pointer; align-items: center; border-radius: 8px; gap: 8px; display: inline-flex; flex-shrink: 0; flex-wrap: wrap; height: 48px; justify-content: center; outline-color: #222222; text-align: center; text-decoration-line: none; width: 100%; border: 1px solid #222222;

saveButtonDisabledClass optional String

Custom CSS class for the disabled save button.

Example: btn-disabled

saveButtonDisabledStyle optional String

Custom CSS styles for the disabled save button.

Default: background-color: #D3D3D3; color: #808080; cursor: not-allowed; border: 0;

undoButtonText optional String

Default: Undo

undoButtonClass optional String

Custom CSS class for the undo button.

Example: btn btn-outline btn-sm font-medium

undoButtonStyle optional String

Custom CSS styles for the undo button.

clearButtonText optional String

Custom text for the clear button.

Default: Clear

clearButtonClass optional String

Custom CSS class for the clear button.

Example: btn btn-outline btn-sm font-medium

clearButtonStyle optional String

Custom CSS styles for the clear button.

textInputPlaceholder optional String

Custom placeholder text for the text input field.

Default: Type signature here

textInputClass optional String

Custom CSS class for the text input field.

Example: input mb-4 input-bordered bg-white text-2xl w-full h-14 rounded-2xl

textInputStyle optional String

Custom CSS styles for the text input field.

canvasClass optional String

Custom CSS class for the canvas element.

Example: bg-white border border-base-300 rounded-2xl w-full

canvasStyle optional String

Custom CSS styles for the canvas element.

typeButtonsContainerClass optional String

Custom CSS class for the type buttons container.

Example: flex gap-2 mb-4 justify-center

typeButtonsContainerStyle optional String

Custom CSS styles for the type buttons container.

Default: margin-bottom: 1rem; display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem;

drawTypeButtonText optional String

Custom text for the draw type button.

Default: Draw

drawTypeButtonClass optional String

Custom CSS class for the draw type button.

Example: 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

drawTypeButtonStyle optional String

Custom CSS styles for the draw type button.

drawTypeButtonActiveClass optional String

Custom CSS class for the active draw type button.

Example: bg-neutral text-white font-semibold

drawTypeButtonActiveStyle optional String

Custom CSS styles for the active draw type button.

Default: color: #fff; background-color: #222222; font-weight: 500;

textTypeButtonText optional String

Custom text for the text type button.

Default: Type

textTypeButtonClass optional String

Custom CSS class for the text type button.

Example: 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

textTypeButtonStyle optional String

Custom CSS styles for the text type button.

textTypeButtonActiveClass optional String

Custom CSS class for the active text type button.

Example: bg-neutral text-white font-semibold

textTypeButtonActiveStyle optional String

Custom CSS styles for the active text type button.

Default: color: #fff; background-color: #222222; font-weight: 500;

uploadTypeButtonText optional String

Custom text for the upload type button.

Default: Upload

uploadTypeButtonClass optional String

Custom CSS class for the upload type button.

Example: 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

uploadTypeButtonStyle optional String

Custom CSS styles for the upload type button.

uploadTypeButtonActiveClass optional String

Custom CSS class for the active upload type button.

Example: bg-neutral text-white font-semibold

uploadTypeButtonActiveStyle optional String

Custom CSS styles for the active upload type button.

Default: color: #fff; background-color: #222222; font-weight: 500;

fontUrl optional String

Custom font URL to be used for the text signature input panel.

Default: https://cdn.jsdelivr.net/npm/@fontsource/dancing-script/files/dancing-script-latin-400-normal.woff

Callbacks

onChange optional Function

Function to be called when changes are made to the signature.

Example: (data) => { console.log(data) }

onSave optional Function

Function to be called on saving changes of the signature. withSubmit attribute should be enabled to trigger this function.

Example: (data) => { console.log(data) }

Copy

<template>
  <SignatureMaker
    v-model="signature"
    @save="onSignatureSave"
  />
</template>

<script>
import { SignatureMaker } from '@docuseal/signature-maker-vue'

export default {
  name: 'App',
  components: {
    SignatureMaker
  },
  data() {
    return {
      signature: null,
    };
  },
  methods: {
    onSignatureSave (data) {
      console.log(data)
    }
  }
}
</script>

View LIVE DEMO

Attributes

download-on-save optional Boolean

Set `false` to disable downloading the signature image on save. It's useful when you want to handle the image data yourself.

Default: false

with-typed optional Boolean

Set `false` to disable text signature input panel.

Default: true

with-drawn optional Boolean

Set `false` to disable drawing signature panel.

Default: true

with-upload optional Boolean

Set `false` to disable uploading signature image panel.

Default: true

with-color-select optional Boolean

Set `false` to disable color selection. Only black color will be available.

Default: true

with-submit optional Boolean

Set `false` to disable the submit button. Any changes will be available as a base64 string in the `change` event. Custom event 'save' will be triggered on clicking the submit button.

Default: true

save-button-text optional String

Default: Sabmit

control-buttons-container-class optional String

Custom CSS class for the control buttons container.

Example: flex gap-2

control-buttons-container-style optional String

Custom CSS styles for the control buttons container. Default CSS styles will be disabled

Default: display: flex; align-items: center; justify-content: space-between; text-align: center; margin: 1rem 0;

save-button-class optional String

Custom CSS class for the save button

Example: btn btn-neutral text-white text-base w-full

save-button-style optional String

Custom CSS styles for the save button

save-button-disabled-class optional String

Custom CSS class for the disabled save button.

Example: btn-disabled

save-button-disabled-style optional String

Custom CSS styles for the disabled save button.

Default: background-color: #D3D3D3; color: #808080; cursor: not-allowed; border: 0;

undo-button-text optional String

Default: Undo

undo-button-class optional String

Custom CSS class for the undo button.

Example: btn btn-outline btn-sm font-medium

undo-button-style optional String

Custom CSS styles for the undo button.

clear-button-text optional String

Custom text for the clear button.

Default: Clear

clear-button-class optional String

Custom CSS class for the clear button.

Example: btn btn-outline btn-sm font-medium

clear-button-style optional String

Custom CSS styles for the clear button.

text-input-placeholder optional String

Custom placeholder text for the text input field.

Default: Type signature here

text-input-class optional String

Custom CSS class for the text input field.

Example: input mb-4 input-bordered bg-white text-2xl w-full h-14 rounded-2xl

text-input-style optional String

Custom CSS styles for the text input field.

canvas-class optional String

Custom CSS class for the canvas element.

Example: bg-white border border-base-300 rounded-2xl w-full

canvas-style optional String

Custom CSS styles for the canvas element.

type-buttons-container-class optional String

Custom CSS class for the type buttons container.

Example: flex gap-2 mb-4 justify-center

type-buttons-container-style optional String

Custom CSS styles for the type buttons container.

Default: margin-bottom: 1rem; display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem;

draw-type-button-text optional String

Custom text for the draw type button.

Default: Draw

draw-type-button-class optional String

Custom CSS class for the draw type button.

Example: 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

draw-type-button-style optional String

Custom CSS styles for the draw type button.

draw-type-button-active-class optional String

Custom CSS class for the active draw type button.

Example: bg-neutral text-white font-semibold

draw-type-button-active-style optional String

Custom CSS styles for the active draw type button.

Default: color: #fff; background-color: #222222; font-weight: 500;

text-type-button-text optional String

Custom text for the text type button.

Default: Type

text-type-button-class optional String

Custom CSS class for the text type button.

Example: 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

text-type-button-style optional String

Custom CSS styles for the text type button.

text-type-button-active-class optional String

Custom CSS class for the active text type button.

Example: bg-neutral text-white font-semibold

text-type-button-active-style optional String

Custom CSS styles for the active text type button.

Default: color: #fff; background-color: #222222; font-weight: 500;

upload-type-button-text optional String

Custom text for the upload type button.

Default: Type

upload-type-button-class optional String

Custom CSS class for the upload type button.

Example: 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

upload-type-button-style optional String

Custom CSS styles for the upload type button.

upload-type-button-active-class optional String

Custom CSS class for the active upload type button.

Example: bg-neutral text-white font-semibold

upload-type-button-active-style optional String

Custom CSS styles for the active upload type button.

Default: color: #fff; background-color: #222222; font-weight: 500;

font-url optional String

Custom font URL to be used for the text signature input panel.

Default: https://cdn.jsdelivr.net/npm/@fontsource/dancing-script/files/dancing-script-latin-400-normal.woff

Callbacks

@save optional Function

Function to be called on saving the signature. data-with-submit attribute should be enabled to trigger this function.

Example: onSignatureSave

@change optional Function

Function to be called on changing the signature.

Example: onSignatureChange

Live Example

Text Signature

Drawing Signature

Upload Signature

Color Selection

Submit Button

Download on Save