Zero Build Tools

Vanilla JS Integration

Add PDF signature verification to any web page with a single <script> tag. No bundler, no framework, no Node.js required.

8-point verification

Rust/WASM powered

Quick Start

Copy this into an HTML file and open it in your browser. That's it.

index.html

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet"
    href="https://unpkg.com/@trexolab/verifykit-vanilla/dist/veripdf.css">
  <style>
    html, body { height: 100%; margin: 0; padding: 0; }
  </style>
</head>
<body>
  <div id="viewer" style="width:100%; height:100vh"></div>

  <script src="https://unpkg.com/@trexolab/verifykit-vanilla/dist/veripdf.umd.js"></script>
  <script>
    const viewer = VeriPdf.create(
      document.getElementById('viewer'),
      {
        theme: { mode: 'system' },
        features: {
          signatures: true,
          search: true,
          fullscreen: true,
        },
      }
    );
  </script>
</body>
</html>

Installation

CDN (unpkg)

No installation needed. Add these tags to your HTML:

<link rel="stylesheet" href="https://unpkg.com/@trexolab/verifykit-vanilla/dist/veripdf.css">
<script src="https://unpkg.com/@trexolab/verifykit-vanilla/dist/veripdf.umd.js"></script>

npm (ES Module)

For use with bundlers (Vite, webpack, etc.):

npm install @trexolab/verifykit-vanilla

Registry: Configure the TrexoLab registry first:

echo '@trexolab:registry=https://verifykit.trexolab.com/api/registry' > .npmrc

API Reference

`VeriPdf.create(container, options?)`

Creates a viewer instance inside the given DOM element. Returns a VeriPdfInstance.

Option	Type	Description
theme.mode	'light' \| 'dark' \| 'system'	Color theme (default: system)
features	VeriPdfFeatures	Enable/disable viewer features
trustStore	TrustStoreConfig	Custom root CA certificates
plugins	VeriPdfPlugin[]	Core verification plugins (e.g., revocation)
onVerified	(result) => void	Callback when verification completes
onError	(error) => void	Callback on error

Instance Methods

Method	Description
load(input, fileName?)	Load and verify a PDF (File, ArrayBuffer, Uint8Array, or URL)
setTheme(mode)	Switch theme at runtime
goToPage(n) / goToNextPage()	Navigate to a specific page
zoomIn() / zoomOut() / zoomTo(n)	Control zoom level
on(event, handler)	Subscribe to events (returns unsubscribe fn)
destroy()	Unmount viewer and free all resources

Examples

File Input

Let users pick a PDF from their device:

<input type="file" id="fileInput" accept=".pdf">
<div id="viewer" style="height: 80vh"></div>

<script>
  const viewer = VeriPdf.create(document.getElementById('viewer'));
  document.getElementById('fileInput')
    .addEventListener('change', function(e) {
      const file = e.target.files[0];
      if (file) viewer.load(file, file.name);
    });
</script>

Load from URL

Fetch and verify a remote PDF:

const viewer = VeriPdf.create(container);
await viewer.load('/api/documents/contract.pdf', 'contract.pdf');

Event Handling

Subscribe to verification and navigation events:

const viewer = VeriPdf.create(container, {
  onVerified(result) {
    console.log('Signatures:', result.signatures.length);
    for (const sig of result.signatures) {
      console.log(sig.name + ': ' + sig.overallStatus);
    }
  }
});

// Subscribe to page changes
const unsub = viewer.on('pageChange', (page) => {
  console.log('Page:', page);
});

// Clean up
unsub();
viewer.destroy();

For the complete API reference, theme customization, and advanced patterns:

Full Documentation API Reference