Extend UI Svelte
GitHub

Docs / Editors / E-Signature

E-Signature

Svelte 5 port of the Extend UI e-signature. Draw on the pad with signature_pad, place the signature onto the PDF at a chosen position and scale with pdf-lib, then download the signed document. Coordinates are PDF points measured from the bottom-left page corner.

Fixture document

E-Signature

Draw your signature above

Loading PDF…

Dark mode

E-Signature

Draw your signature above

Loading PDF…

Empty source

E-Signature

Draw your signature above

Choose a PDF to sign

Pass a PDF URL with the file prop.

Differences from upstream

  • Exported as both ESignature and the upstream name ESignatureBlock. The upstream file prop is accepted; src is kept as an alias (file wins). className and class are both accepted.
  • One signature, drawn on an inline pad and placed with numeric position, size, and scale controls, instead of the signature dialog and the draggable field overlay on the shared PDF viewer.
  • Not ported: the resizable two-pane layout, the signature field list panel, initials, date, checkbox, and text fields, recipients and field ownership, required-field validation, and signed/pending/declined states.
  • The signed download is named <name>-signed.pdf instead of upstream's fixed signed-document.pdf.
  • Dark mode is set by the parent through isDark; the block has no theme switch, so onIsDarkChange is never called.
  • Port additions: fileName, page, bindable positionX/positionY/signatureWidth/signatureHeight/scale, penColor, backgroundColor, showDownload, and event callbacks. Left unset, position and size follow upstream's default field scaled to the active page, as upstream's download does.
  • Port-only exports, the component under its port name, and the placement and PDF stamping helpers and types: ESignature, ESignatureProps, clampPage, clampScale, dataUrlToBytes, DEFAULT_POSITION_X, DEFAULT_POSITION_Y, DEFAULT_SCALE, DEFAULT_SIGNATURE_HEIGHT, DEFAULT_SIGNATURE_WIDTH, defaultPlacementForPage, embedSignaturePng, ensurePdfExtension, getSignedDownloadFileName, MAX_SCALE, MIN_SCALE, resolvePlacement, SignaturePlacement, and SignaturePlacementInput.

Back to all components