Signnee — Build From Scratch

Render each PDF page as a high-resolution canvas image so users can drag and drop signature fields on top of the correct positions.

import * as pdfjsLib from 'pdfjs-dist'

const pdf = await pdfjsLib.getDocument(fileUrl).promise
const page = await pdf.getPage(1)
const viewport = page.getViewport({ scale: 1.5 })
const canvas = document.getElementById('pdf-canvas')
const ctx = canvas.getContext('2d')

await page.render({ canvasContext: ctx, viewport }).promise
// Now overlay field positions on top of this canvas

Drag-and-drop interface to place signature, date, text, initials, and checkbox fields at exact pixel coordinates on the PDF page.

// Store field as % of page dimensions
const field = {
  type: 'signature',  // signature | text | date | checkbox
  page: 1,
  x: 0.32,    // 32% from left
  y: 0.74,    // 74% from top
  width: 0.25,
  height: 0.06,
  required: true,
  signer_role: 'Client'
}

Canvas-based signature drawing for mouse and touch. Must capture as SVG or PNG. Also support typed signatures and uploaded image signatures.

import SignaturePad from 'signature_pad'

const canvas = document.getElementById('sig-pad')
const pad = new SignaturePad(canvas, {
  backgroundColor: 'rgba(255,255,255,0)',
  penColor: '#000000',
})

// Get signature as PNG data URL
const dataURL = pad.toDataURL('image/png')

// Or as SVG for vector quality
const svgString = pad.toSVG()

After all parties sign, embed actual signatures as images into the PDF at the correct coordinates. Flatten the PDF so fields are baked in and cannot be altered.

import { PDFDocument } from 'pdf-lib'

const pdfBytes = await fetch(originalPdfUrl).then(r => r.arrayBuffer())
const pdfDoc = await PDFDocument.load(pdfBytes)
const page = pdfDoc.getPage(0)
const { width, height } = page.getSize()

// Embed signature image at field coordinates
const sigImageBytes = Buffer.from(sigDataUrl.split(',')[1], 'base64')
const sigImage = await pdfDoc.embedPng(sigImageBytes)

page.drawImage(sigImage, {
  x: field.x * width,
  y: height - (field.y * height) - (field.height * height),
  width: field.width * width,
  height: field.height * height,
})

const finalPdfBytes = await pdfDoc.save()
// Upload to Supabase Storage

Each signer gets a unique URL with a signed JWT token. No account needed. Token expires after X days. Validates identity via email click.

import { SignJWT } from 'jose'

// Generate signer token (sent in email)
const token = await new SignJWT({
  submission_id: 'sub_abc123',
  signer_email: 'client@example.com',
  role: 'Client',
})
.setProtectedHeader({ alg: 'HS256' })
.setExpirationTime('7d')
.sign(secret)

// Signer URL:
// https://signnee.online/sign/{token}

// Verify on page load
const { payload } = await jwtVerify(token, secret)
// payload.submission_id → load document

Every action (opened, signed, IP address, timestamp, user agent) must be recorded in a tamper-evident log. Required for legal admissibility (ESIGN Act, UETA).

// Each audit event hashes the previous event
// creating a tamper-evident chain
const auditEvent = {
  submission_id,
  event: 'signed',      // opened|signed|declined|completed
  signer_email,
  ip_address: req.headers['x-forwarded-for'],
  user_agent: req.headers['user-agent'],
  timestamp: new Date().toISOString(),
  prev_hash: previousEventHash,
}

const hash = crypto
  .createHash('sha256')
  .update(JSON.stringify(auditEvent))
  .digest('hex')

// Store event + hash in audit_log table

Transactional emails for: signing request, signed notification, completion with PDF attached, reminders for pending signers, declined alerts.

import { Resend } from 'resend'
const resend = new Resend(process.env.RESEND_API_KEY)

// Send signing request
await resend.emails.send({
  from: 'sign@signnee.online',
  to: signerEmail,
  subject: `Please sign: ${documentTitle}`,
  react: SigningRequestEmail({
    signerName,
    documentTitle,
    signingUrl: `https://signnee.online/sign/${token}`,
    expiresIn: '7 days',
  }),
})

// Attach completed PDF
await resend.emails.send({
  from: 'sign@signnee.online',
  to: [senderEmail, signerEmail],
  subject: `Signed: ${documentTitle}`,
  attachments: [{ filename: 'signed.pdf', content: pdfBuffer }],
})