# @lemonadejs/signature

> The LemonadeJS JavaScript Signature Pad is a responsive component that simplifies signature capture in web applications. It is compatible with Vanilla JavaScript, React, Vue, and Angular frameworks, allowing users to capture signatures using either mouse

Latest version **5.0.0** (published 2025-04-18) · 0 weekly downloads

## Install

```sh
npm install @lemonadejs/signature
pnpm add @lemonadejs/signature
yarn add @lemonadejs/signature
bun add @lemonadejs/signature
```

## Health

**Score 30/100 (F)** — status: maintenance-mode.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 5.0.0 |
| Published | 2025-04-18 |
| First published | 2021-12-22 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 15.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Contact |
| Maintainers | hodeware |
| Keywords | signature pad, javascript signature pad, js signature pad, signature pad js |

## Links

- npm: https://www.npmjs.com/package/@lemonadejs/signature
- npm.io page: https://npm.io/package/@lemonadejs/signature

## Dependencies (1)

- [lemonadejs](https://npm.io/package/lemonadejs.md) ^5.0.3

## Recent versions

- 5.0.0 (latest) — 2025-04-18
- 6.0.0-beta.0 (beta) — 2026-08-04
- 2.3.0 — 2025-01-01
- 2.2.1 — 2024-06-30
- 2.2.0 — 2024-05-11
- 2.1.3 — 2024-03-12
- 2.0.4 — 2023-07-02
- 2.0.3 — 2023-07-02
- 2.0.2 — 2023-07-02
- 2.0.1 — 2023-07-02
- 2.0.0 — 2023-01-09
- 1.2.0 — 2022-09-09
- 1.1.2 — 2022-01-08
- 1.1.1 — 2022-01-06
- 1.1.0 — 2022-01-03
- … 2 more at https://npm.io/package/@lemonadejs/signature/versions

## README

# Javascript Signature Pad

[JavaScript Signature Pad Docs](https://lemonadejs.net/docs/plugins/signature)

Compatible with Vanilla JavaScript, LemonadeJS, React, Vue or Angular.

The LemonadeJS Signature Pad is a lightweight, responsive JavaScript component for capturing signatures via mouse or touch, compatible with Vanilla JavaScript, React, Vue, Angular, and Web Components.

## Features

-   Lightweight: The lemonade signature pad is only about 2 KBytes;
-   Customizable: Easily configure size, line thickness, and instructions to suit your application needs.
-   Integration: It can be used as a standalone library or integrated with any modern framework;

## Getting Started

You can install using NPM or using directly from a CDN.

### npm Installation

To install it in your project using npm, run the following command:

```bash
$ npm install @lemonadejs/signature
```

### CDN

To use data grid via a CDN, include the following script tags in your HTML file:

```html
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/signature/dist/index.min.js"></script>
```

### Configuration

Quick example with Lemonade

```javascript
import Signature from "@lemonadejs/signature";

export default function Component() {
    const self = this;
    self.width = 400;
    self.height = 200;
    self.value = [];

    return `<Signature
        value="{{self.value}}"
        width="{{self.width}}"
        height="{{self.height}}"
        instructions="Please sign this document" />`;
}
```

ReactJS Signature Pad Plugin

```jsx
import React, { useRef } from "react";
import Signature from "@lemonadejs/signature/dist/react";

export default function App() {
    const signature = useRef();
    const width = 400;
    const height = 200;
    const value = [];
    return (
        <>
            <Signature ref={signature} value={value} width={width} height={height} instructions="Please sign this document" />
        </>
    );
}
```

VueJS Signature Pad Plugin

```vue
<template>
  <Signature ref="signature" :value="[]" :width="400" :height="200" instructions="Please sign this document" />
</template>

<script>
import Signature from '@lemonadejs/signature/dist/vue';

export default {
  name: 'App',
  components: {
      Signature,
  },
};
</script>
```

Web-Component Signature Pad

```html
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/signature/dist/index.min.js"></script>
<lm-signature width="400" height="200"></lm-signature>
```

### Attributes

| Attribute               | Description                                                          |
|-------------------------|----------------------------------------------------------------------|
| `value?: Array`         | The value represents the painted point's position.                   |
| `width?: Number`        | The width of the signature pad.                                      |
| `height?: Number`       | The height of the signature pad.                                     |
| `instructions?: String` | The instruction text. It appears at the bottom of the signature pad. |
| `line?: Number`         | The size of each painted point.                                      |
| `disabled?: Boolean`    | Signature is disabled if true.                                       |
| `getValue: Function`    | Gets the value array.                                                |
| `setValue: Function`    | Sets the internal state value.                                       |
| `getImage: Function`    | Gets the image based on the value.                                   |

### Events

| Event     | Description                             |
|-----------|-----------------------------------------|
| onchange? | When the value of the component changes |
| onload?   | When the component completes loading    |

## License

The LemonadeJS signature pad is released under the MIT.

## Other JavaScript Plugins

-   [jSuites - JavaScript Plugins](https://jsuites.net/docs)
-   [JavaScript Data Grid](https://jspreadsheet.com)

---
_Source: https://npm.io/package/@lemonadejs/signature · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._