> ## Documentation Index
> Fetch the complete documentation index at: https://docs.thesignproof.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Signature Generator

> Create a transparent PNG signature in the browser — as a hosted free tool, or embedded in your app with @signproof/embed-react. No backend required.

## 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.

1. **Hosted tool** — send users to
   [thesignproof.com/online-signature](https://thesignproof.com/online-signature) to draw,
   type, or upload a signature and download a transparent PNG. Free, no account.
2. **Embedded component** — drop `SignProofSignatureMaker` into your own app.

<Note>
  This is separate from [embedded signing](/guides/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.
</Note>

***

## Embed the maker

```bash theme={null}
npm install @signproof/embed-react
```

```tsx theme={null}
import { SignProofSignatureMaker } from '@signproof/embed-react';

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

### Output object

```ts theme={null}
{
  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.