✍️

Sign PDF

Add typed or drawn signatures to PDFs using mouse or touchscreen. Supports multiple signature positions.

Sign PDF

Create signatures by drawing, typing, or uploading an image, then place them anywhere on PDF pages β€” all client-side.

Drop a PDF file here

or click to browse

How to use the Sign PDF tool

You need to sign a PDF contract before sending it back to a client, but your printer and scanner are packed away. Drop the PDF into the tool, click Create Signature, and choose how to sign: draw freehand on the canvas, type your name in one of 8 script fonts, or upload a scanned image of your wet-ink signature. Click on the page where the signature goes, drag it into position, and hit Save PDF. The signed document downloads in seconds.

A 3-page contract that needs two signatures and a date takes about 30 seconds end-to-end. The tool supports PNG, JPG, GIF, and WebP uploads, so you can use a photo of your signature taken on your phone. Saved signatures persist in your browser for reuse across sessions, so you only create your signature once.

Real-World Applications and Use Cases

Contract and agreement signing

Business teams sign contracts, NDAs, and agreements without printing, physically signing, and scanning. The draw tool creates a freehand signature that matches your wet ink, while the type tool provides a clean script font for formal documents. Signatures are placed at the signature line, dates are added as separate elements, and the signed PDF is downloaded ready for distribution.

Form completion and document approval

Administrative staff complete PDF forms that require signatures β€” expense reports, purchase orders, leave requests. The upload tool lets you use a scanned version of your actual signature, maintaining consistency with physically signed documents. Saved signatures in localStorage eliminate the need to recreate your signature for each document.

Multi-signer document routing

Legal and HR teams process documents requiring multiple signatures. Each signer’s signature is created and placed on different pages or different locations on the same page. The per-page storage system keeps signatures organized, and the clear page button lets you remove all placements on a specific page without affecting other pages.

How the Sign PDF tool works

The tool uses a two-library architecture: PDF.js renders each page onto an HTML Canvas element, while pdf-lib embeds signature images and date text onto the PDF on save. An SVG overlay handles signature placement, dragging, and resizing. Both libraries execute in the browser via WebAssembly β€” no server round-trips occur at any stage.

Signature creation methods

Draw: A 500Γ—150 Canvas element captures freehand mouse/touch input. The pen colour (via color input) and stroke width (1-8px range slider) are configurable. The canvas uses a checkered transparency background to indicate the transparent areas of the signature. The signature is exported as a PNG data URL via toDataURL('image/png').

Type: The user types their name or initials, selects from 8 Google Fonts script families (Dancing Script, Great Vibes, Pacifico, Satisfy, Allura, Sacramento, Homemade Apple, Alex Brush) or Helvetica, and chooses a colour. The text is rendered onto a temporary Canvas at 48px font size and exported as a PNG data URL. A live preview updates in real time as the user types.

Upload: Users drag-and-drop or browse for image files (PNG, JPG, GIF, WebP). The image is loaded via FileReader and displayed as a preview. The original image data is preserved as a data URL for embedding into the PDF.

Placement and interaction: Clicking on the page places the active signature at the click position. An SVG overlay renders each placed signature as an <image> element with a dashed border and resize handle. Dragging moves the signature; the resize handle adjusts width/height proportionally. Double-clicking removes the element.

Save operation: When the user clicks β€œSave PDF”, pdf-lib loads the original document, converts each signature data URL to bytes, embeds it as a PNG or JPG image, and draws it at the stored coordinates using drawImage(). Date elements are drawn as text using drawText() with the Helvetica font. The signed PDF is serialised to bytes and offered as a download.

Frequently Asked Questions

Is my data uploaded to a server?

No. Everything runs entirely in your browser using WebAssembly (pdf-lib) and Canvas (PDF.js). Your files and signatures never leave your device β€” there is no server upload at any point.

Are my signatures saved?

Yes. Created signatures are saved in your browser’s localStorage. You can load, reuse, or delete them from the Saved Signatures panel. Saved signatures persist across browser sessions.

Can I reposition elements after placing them?

Yes. Drag signatures and dates independently to any position on the page. Use the Resize button to adjust signature size with locked aspect ratio. Double-click any element to remove it.

Is this legally binding?

This creates a visual signature for convenience β€” it is equivalent to typing or drawing your name on a document. It is not a cryptographic or legally binding e-signature. For legally binding electronic signatures, use a dedicated e-signature service.

What image formats are supported for upload?

The tool accepts PNG, JPG, GIF, and WebP image files. The image is embedded at its original quality into the PDF. For best results, use a transparent PNG with a clear signature on a white or transparent background.

Can I sign multiple pages?

Yes. Use the Prev/Next buttons to navigate between pages. Each page stores its own independent set of signatures and dates. When you save, all placements across all pages are embedded into the output PDF.

How do I change the signature size?

After placing a signature, click the Resize button in the signature slot panel. This opens a modal where you can enter exact width and height values with a locked aspect ratio option. You can also drag the resize handle on the placed signature for visual adjustment.

signpdfsignaturedrawtypeuploadesign

More Tools You Might Like

✏️Edit PDF
πŸ“„Merge PDF
βœ‚οΈSplit PDF
πŸ—‚οΈOrganize PDF
πŸ—‘οΈDelete Pages
πŸ”„Rotate PDF