v1.0.1 — Now available
Capture signatures anywhere. Framework-agnostic.
A lightweight, TypeScript-first JavaScript signature pad for the modern web. Works with React, Vue, Vanilla JS, and more.
npm install autographjsTry it — draw your signature
Everything you need
Lightweight
< 5kb gzipped. No bloat, no heavy dependencies.
TypeScript-first
Full type definitions out of the box.
Tree-shakeable
Import only what you need.
Pressure-sensitive
Stylus & touch pressure support.
Multi-export
PNG, JPEG, SVG, Base64, Blob.
Framework-agnostic
React, Vue, Vanilla JS, and more.
How we compare
See how AutographJS stacks up against other signature libraries.
| Feature | AutographJS | signature_pad | jSignature |
|---|---|---|---|
| Bundle size (gzip) | < 5kb | ~10kb | ~30kb+ |
| TypeScript support | |||
| Framework adapters | React, Vue, Vanilla | Vanilla only | jQuery |
| Pressure sensitivity | |||
| SVG export | |||
| Multiple brush types | |||
| Undo/Redo | |||
| sendToAPI() helper | |||
| Tree-shakeable | |||
| Maintained | Active | Sporadic | Archived |
Works with your stack
First-class support for React, Vue, and Vanilla JS. New to React? Follow the React signature pad guide.
tsx
import { useRef } from 'react';
import { ReactSignaturePad } from 'autographjs/react';
import type { SignaturePadRef } from 'autographjs/react';
function App() {
const padRef = useRef<SignaturePadRef>(null);
return (
<ReactSignaturePad
ref={padRef}
onChange={() => setSignature(padRef.current?.toPNG())}
strokeWidth={2.5}
strokeColor="#1a1a2e"
/>
);
}Install in seconds
npm
npm install autographjsyarn
yarn add autographjspnpm
pnpm add autographjsThree steps. That's it.
1
Install
Add AutographJS to your project with your favorite package manager.
2
Add component
Drop in the signature pad component with your preferred framework.
3
Export
Export as PNG, JPEG, SVG, Base64, or send directly to your API.
Ready to capture signatures?
Start building with AutographJS in under a minute.