Signature Generator

Two ways to use it

The signature generator runs entirely in the browser — drawing, typed rendering, and image cleanup never leave the device, and no API call is made.

Hosted tool — send users to thesignproof.com/online-signature to draw, type, or upload a signature and download a transparent PNG. Free, no account.
Embedded component — drop SignProofSignatureMaker into your own app.

This is separate from embedded signing. The generator makes a signature image; it does not create a legally sealed document. To collect legally binding signatures with consent, identity, audit trail, and sealing, use the signing flow.

Embed the maker

npm install @signproof/embed-react

import { SignProofSignatureMaker } from '@signproof/embed-react';

<SignProofSignatureMaker
  defaultMode="draw"
  allowedModes={['draw', 'type', 'upload']}
  onComplete={(sig) => setSignaturePng(sig.pngDataUrl)}
/>

Output object

{
  mode: 'draw' | 'type' | 'upload',
  pngDataUrl: string,   // transparent, auto-cropped PNG (data URL)
  width: number,
  height: number,
  createdAt: string,    // ISO timestamp
  typedName?: string,   // present for 'type' mode
}

onChange fires on every change (or null when cleared); onComplete fires when a signature is produced.

Props

Prop	Default	Notes
`defaultMode`	`'draw'`	Initial tab.
`allowedModes`	`['draw','type']`	Which tabs to show.
`onChange` / `onComplete`	—	Receive the signature result.
`showDownload` / `showCopy`	`true`	Built-in Download / Copy buttons.
`defaultInkColor`	`#0F1B2D`	Black / blue / gray are offered.

Privacy

Nothing is uploaded. Image processing (auto-crop, transparency, typed rendering) happens on the client. The component ships no webfonts — for premium typed styles, load your own cursive fonts and they’ll be used automatically.

Relationship to signing

The same signature-capture concepts power the real signing flow: when a signer applies a signature inside a SignProof envelope (emailed link or embedded), they get the same draw/type capture, auto-cropped to a transparent PNG, then flattened into the sealed PDF with a tamper-evident audit trail.

Get Started

Guides

Signature Generator

Two ways to use it

Embed the maker

Output object

Props

Privacy

Relationship to signing

​Two ways to use it

​Embed the maker

​Output object

​Props

​Privacy

​Relationship to signing

Two ways to use it

Embed the maker

Output object

Props

Privacy

Relationship to signing