@aoexl/sign-svelte

Svelte 4 integration for the Aoexl Sign PDF eSignature SDK.

Installation

npm install @aoexl/sign-svelte @aoexl/sign
# peer dep
npm install svelte

Quick start

<script>
  import AoexlSign from '@aoexl/sign-svelte'

  const signers = [{ name: 'Jane Doe', email: '[email protected]', role: 'signer' }]

  function handleComplete(event) {
    const { signedPdfBytes, fields } = event.detail
    console.log('Signing complete', fields)
    // upload signedPdfBytes to your server
  }

  function handleError(event) {
    console.error('Signing error', event.detail)
  }
</script>

<AoexlSign
  licenseKey="pk_live_xxxxxxxxxxxx"
  pdfUrl="https://your-server.com/contract.pdf"
  mode="sign"
  {signers}
  on:complete={handleComplete}
  on:error={handleError}
  style="display:block;height:700px;"
/>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | licenseKey | string | — | Required. Your Aoexl license key. | | pdfUrl | string | — | Required. URL or data-URL of the PDF. | | mode | 'prepare' \| 'sign' \| 'view' | 'sign' | Viewer mode. | | signers | Signer[] | [] | Signer definitions. | | fields | Field[] | [] | Pre-placed fields (required in sign/view mode). | | theme | { primary?: string; accent?: string } | {} | Color overrides. | | workerSrc | string | — | Custom PDF.js worker URL. |

Events

| Event | event.detail type | Description | |-------|---------------------|-------------| | complete | CompleteResult | Fired when the user finishes signing / preparing. | | error | Error | Fired on any error (license, PDF load, etc.). |

Modes

| Mode | Description | |------|-------------| | prepare | Drag and drop fields onto the PDF; emits complete with the field layout and signer list. | | sign | Present pre-placed fields for the signer to fill and sign. | | view | Read-only rendering of a signed PDF. |

Prepare mode example

<script>
  import AoexlSign from '@aoexl/sign-svelte'

  let preparedFields = []
  let preparedSigners = []

  function handleComplete(event) {
    preparedFields  = event.detail.fields
    preparedSigners = event.detail.signers
    // Save to your backend and send signing invitations
  }
</script>

<AoexlSign
  licenseKey="pk_live_xxxxxxxxxxxx"
  pdfUrl="https://your-server.com/blank-contract.pdf"
  mode="prepare"
  on:complete={handleComplete}
  on:error={(e) => console.error(e.detail)}
  style="display:block;height:700px;"
/>

TypeScript

import type { AoexlSignProps, AoexlSignEvents, Field, Signer, CompleteResult } from '@aoexl/sign-svelte'

Building

npm run build   # outputs dist/aoexl-sign-svelte.js (ESM) + dist/aoexl-sign-svelte.cjs (CJS)

License

UNLICENSED — contact Aoexl for a commercial license.