Getting Started with AutographJS

Install AutographJS and capture your first signature in under a minute.

Installation

npm

npm install autographjs

yarn

yarn add autographjs

pnpm

pnpm add autographjs

Quick Start

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={() => console.log('updated')} />
      <button onClick={() => console.log(padRef.current?.toPNG())}>Save</button>
    </>
  );
}

Basic Usage

tsx

import { useRef } from 'react';
import type { SignaturePadRef } from 'autographjs/react';

function SignatureForm() {
  const padRef = useRef<SignaturePadRef>(null);

  const submit = async () => {
    const signature = padRef.current?.toPNG();
    if (!signature) return;

    await fetch('/api/signatures', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ signature }),
    });
  };

  return (
    <div>
      <ReactSignaturePad ref={padRef} onChange={() => console.log('changed')} />
      <button onClick={submit}>Submit</button>
    </div>
  );
}

Configuration

All available options:

Option	Type	Default	Description
`strokeWidth`	number	`2.5`	Width of the stroke in pixels
`strokeColor`	string	`'#1a1a2e'`	Color of the stroke
`backgroundColor`	string	`'#ffffff'`	Canvas background color
`width`	number	`600`	Canvas width in pixels
`height`	number	`200`	Canvas height in pixels
`pressure`	boolean	`true`	Enable pressure sensitivity
`readOnly`	boolean	`false`	Disable drawing
`brushType`	string	`'pen'`	Brush style: pen, marker, calligraphy, dotted

Export API

`toBase64(type?)`

Returns the signature as a Base64-encoded data URL.

typescript

const data = pad.toBase64();
const jpeg = pad.toBase64('image/jpeg');

`toPNG()`

Returns the signature as a PNG data URL.

typescript

const png = pad.toPNG();

`toJPEG()`

Returns the signature as a JPEG data URL.

typescript

const jpeg = pad.toJPEG();

`toSVG()`

Returns the signature as an SVG string.

typescript

const svg = pad.toSVG();

const blob = new Blob([svg], { type: 'image/svg+xml' });
const url = URL.createObjectURL(blob);

`toBlob() (core only)`

Available on core SignaturePad class instances.

typescript

const blob = await pad.toBlob();
const file = new File([blob], 'signature.png');

API Helpers

Built-in helpers to send signatures to your backend.

typescript

import { sendToAPI } from 'autographjs';

const response = await sendToAPI(pad, {
  url: '/api/signatures',
  method: 'POST',
  format: 'png',
});

const formData = new FormData();
const dataUrl = pad.toPNG();
const blob = await (await fetch(dataUrl)).blob();
formData.append('signature', blob, 'signature.png');
formData.append('userId', '123');

await fetch('/api/upload', {
  method: 'POST',
  body: formData,
});

Controls

`clear()`

Clears the signature canvas and resets redo history.

typescript

pad.clear();

`undo()`

Undoes the last stroke. Stroke is pushed to redo stack.

typescript

pad.undo();

`redo()`

Redoes the last undone stroke.

typescript

pad.redo();

`disable() / enable() (core only)`

Read-only controls on the core SignaturePad class.

typescript

pad.disable();
pad.enable();

`isEmpty()`

Returns true if no strokes have been drawn.

typescript

if (pad.isEmpty()) {
  alert('Please sign before submitting');
}

`getStrokeCount()`

Returns the number of strokes drawn.

typescript

const count = pad.getStrokeCount();

TypeScript

AutographJS ships with TypeScript definitions.

typescript

type BrushType = 'pen' | 'marker' | 'calligraphy' | 'dotted';

interface SignaturePadOptions {
  strokeWidth?: number;
  strokeColor?: string;
  backgroundColor?: string;
  width?: number;
  height?: number;
  pressure?: boolean;
  readOnly?: boolean;
  brushType?: BrushType;
}

interface SignaturePadInstance {
  clear(): void;
  undo(): void;
  redo(): void;
  toBase64(type?: string): string;
  toPNG(): string;
  toJPEG(): string;
  toSVG(): string;
  isEmpty(): boolean;
  getStrokeCount(): number;
}

interface SignaturePadProps extends SignaturePadOptions {
  onChange?: () => void;
  className?: string;
}

interface SendToAPIOptions {
  url: string;
  method?: string;
  format?: 'png' | 'jpeg' | 'svg' | 'base64';
  headers?: Record<string, string>;
  metadata?: Record<string, unknown>;
}

// Core class (autographjs) also includes: disable(), enable(), toBlob().

Examples

Form integration with validation

tsx

function ContractForm() {
  const padRef = useRef(null);
  const [isValid, setIsValid] = useState(false);

  const handleChange = () => {
    setIsValid(padRef.current.getStrokeCount() >= 2);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!isValid) return;

    const signature = padRef.current.toPNG();
    await fetch('/api/contracts', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ contractId: '123', signature, signedAt: new Date().toISOString() }),
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <SignaturePad ref={padRef} onChange={handleChange} />
      {!isValid && <p>Please provide a valid signature</p>}
      <button type="submit" disabled={!isValid}>Accept & Sign</button>
    </form>
  );
}

Backend Integration

Examples showing how to receive and store signatures on the server.

Receiving Base64 signatures

typescript

const express = require('express');
const fs = require('fs');
const app = express();

app.use(express.json({ limit: '10mb' }));

app.post('/api/signatures', (req, res) => {
  const { signature, userId } = req.body;
  const base64Data = signature.replace(/^data:image\/\w+;base64,/, '');
  const filename = `sig_${userId}_${Date.now()}.png`;
  fs.writeFileSync(`./uploads/${filename}`, base64Data, 'base64');
  res.json({ success: true, filename, url: `/uploads/${filename}` });
});

app.listen(3000);

Migration Guide

Switching from another signature library? Here's how to migrate.

From signature_pad

signature_pad	AutographJS
`new SignaturePad(canvas)`	`new SignaturePad(canvas)`
`pad.toDataURL()`	`pad.toBase64()`
`pad.toDataURL('image/jpeg')`	`pad.toJPEG()`
`pad.toSVG()`	`pad.toSVG()`
`pad.clear()`	`pad.clear()`
`pad.isEmpty()`	`pad.isEmpty()`
`pad.off()`	`pad.disable()`
`pad.on()`	`pad.enable()`
`N/A`	`pad.undo() / pad.redo()`
`N/A`	`pad.getStrokeCount()`
`N/A`	`pad.toBlob() (core class)`
`N/A`	`sendToAPI(pad, options)`

FAQ

What browsers are supported?

All modern browsers — Chrome, Firefox, Safari, Edge. IE11 is not supported.

Does it work on mobile?

Yes. AutographJS uses Pointer Events for mouse, touch, and stylus support.

Can I customize the brush?

Yes. AutographJS ships with 4 brush types (pen, marker, calligraphy, dotted).

How do I validate signatures?

Use isEmpty() and getStrokeCount() to validate drawn input.

How do I set read-only mode?

Use readOnly: true in options/props. Core class instances also provide disable()/enable().