Quick Start

npm install @superdoc-dev/esign

import SuperDocESign from '@superdoc-dev/esign';
import 'superdoc/style.css';

function AgreementForm() {
  const handleSubmit = async (data) => {
    console.log('Signed:', data);
    // Save to your backend
    await api.saveAgreement(data);
  };

  return (
    <SuperDocESign
      eventId="agreement-001"
      document={{ source: "terms.docx" }}
      onSubmit={handleSubmit}
    />
  );
}

<SuperDocESign
  eventId="agreement-002"
  
  document={{
    source: "contract.docx",
    validation: {
      scroll: { required: true }  // Must scroll to bottom
    }
  }}
  
  fields={{
    signer: [
      {
        id: '1',
        type: 'signature',
        validation: { required: true },
        label: 'Type your full name'
      }
    ]
  }}
  
  onSubmit={handleSubmit}
/>

// Document contains fields with IDs: field_client_name, field_company

<SuperDocESign
  eventId="contract-003"
  document={{ source: contractFile }}
  
  fields={{
    document: [
      { id: '1', value: 'John Doe' },
      { id: '2', value: 'Acme Corp' }
    ]
  }}
  
  onSubmit={handleSubmit}
/>

fields={{
  signer: [
    {
      id: '1',
      type: 'checkbox',
      validation: { required: true },
      label: 'I accept the terms and conditions'
    },
    {
      id: '2',
      type: 'checkbox', 
      validation: { required: true },
      label: 'I acknowledge the privacy policy'
    }
  ]
}}

const handleSubmit = async (data) => {
  // data contains:
  // - eventId: Your unique session ID
  // - timestamp: When submitted
  // - duration: Time spent in seconds
  // - auditTrail: Array of timestamped events
  // - signerFields: Values from interactive fields
  // - isFullyCompleted: All requirements met
  
  console.log('Audit trail:', data.auditTrail);
  console.log('Signature:', data.signerFields.find(f => f.id === '1'));
  
  await saveToDatabase(data);
};

import SuperDocESign from '@superdoc-dev/esign';
import type { SubmitData } from '@superdoc-dev/esign';

const handleSubmit = async (data: SubmitData) => {
  // Fully typed data structure
};