Quick Start

Get a working VerifyKit integration in under 5 minutes. Choose the path that fits your project.

Prerequisites: Make sure you have configured the npm registry and installed the relevant packages. See Installation for details.

React

Install:

bash

npm install @trexolab/verifykit-react

Create the viewer:

tsx

import { useState } from 'react'
import {
  VerifyKitProvider,
  Viewer,
  WelcomeScreen,
  useVerification,
  defaultLayoutPlugin,
} from '@trexolab/verifykit-react'
import '@trexolab/verifykit-react/styles.css'
 
function App() {
  return (
    <VerifyKitProvider config={{
      workerUrl: 'https://unpkg.com/pdfjs-dist@5.5.207/legacy/build/pdf.worker.min.mjs',
      theme: { mode: 'system' },
    }}>
      <PdfViewer />
    </VerifyKitProvider>
  )
}
 
function PdfViewer() {
  const verification = useVerification()
  const [layout] = useState(() => defaultLayoutPlugin())
 
  if (!verification.fileBuffer) {
    return <WelcomeScreen onOpenFile={(f) => verification.load(f)} />
  }
 
  return (
    <Viewer
      fileBuffer={verification.fileBuffer}
      fileName={verification.fileName}
      plugins={[layout.plugin]}
      onOpenFile={(f) => verification.load(f)}
      signatures={verification.signatures}
      unsignedFields={verification.unsignedFields}
      verificationStatus={verification.status ?? undefined}
    />
  )
}
 
export default App

What is happening here:

VerifyKitProvider initializes the WASM engine and sets up theming context.
useVerification() returns state and methods for loading PDFs and tracking verification results.
WelcomeScreen renders a drag-and-drop landing page until a file is loaded.
Viewer displays the PDF with the default layout plugin (toolbar, sidebar, page navigation). You can also pass a verifying prop to show a loading indicator while verification is in progress.
defaultLayoutPlugin() composes the standard set of viewer plugins into a single layout.

Add a global CSS reset so the viewer fills the viewport:

css

html, body, #root {
  height: 100%;
  margin: 0;
  padding: 0;
}

Node.js (Headless Verification)

For server-side or CLI verification with no UI.

Install:

bash

npm install @trexolab/verifykit-core

Verify a PDF:

typescript

import { createVerifier } from '@trexolab/verifykit-core'
import { readFile } from 'node:fs/promises'
 
const verifier = await createVerifier()
 
try {
  const buffer = await readFile('signed-contract.pdf')
  const result = await verifier.verify(buffer, 'signed-contract.pdf')
 
  console.log(`Signatures: ${result.signatures.length}`)
  for (const sig of result.signatures) {
    console.log(`  ${sig.name}: ${sig.overallStatus}`)
  }
} finally {
  verifier.dispose()
}

What is happening here:

createVerifier() is async -- it loads and initializes the WASM module.
verify() parses the PDF, extracts all signature fields, and runs the full 8-point verification pipeline.
Each signature in the result includes overallStatus ("valid", "warning", "invalid", or "unknown") along with detailed check results.
dispose() frees the WASM memory. Always call it when you are done.

Add revocation checking by installing the plugin:

bash

npm install @trexolab/verifykit-plugin-revocation

typescript

import { createVerifier } from '@trexolab/verifykit-core'
import { revocationPlugin } from '@trexolab/verifykit-plugin-revocation'
 
const verifier = await createVerifier({
  plugins: [revocationPlugin()],
})

Vanilla JS (Zero-Build)

No npm, no bundler, no framework. Just HTML.

Add to your page:

html

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://verifykit.trexolab.com/cdn/verifykit.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://verifykit.trexolab.com/cdn/verifykit.umd.js"></script>
  <script>
    const viewer = VerifyKit.create(
      document.getElementById('viewer'),
      {
        workerUrl: 'https://unpkg.com/pdfjs-dist@5.5.207/legacy/build/pdf.worker.min.mjs',
        theme: { mode: 'system' },
      }
    )
    viewer.load('/document.pdf', 'document.pdf')
  </script>
</body>
</html>

What is happening here:

The CSS and JS files are loaded from the VerifyKit CDN -- no install step needed.
VerifyKit.create() mounts a full viewer into the target container element.
viewer.load() fetches the PDF, renders it, and runs signature verification automatically.

Load a file from user input instead of a fixed URL:

html

<input type="file" id="file-input" accept=".pdf">
 
<script>
  document.getElementById('file-input').addEventListener('change', (e) => {
    const file = e.target.files[0]
    if (file) {
      file.arrayBuffer().then((buf) => viewer.load(buf, file.name))
    }
  })
</script>

Clean up when removing the viewer (important in single-page applications):

javascript

viewer.destroy()

Vite + React

VerifyKit works with Vite out of the box. No plugins or WASM configuration needed.

Create a new project:

bash

npm create vite@latest my-app -- --template react-ts
cd my-app
echo '@trexolab:registry=https://verifykit.trexolab.com/api/registry' > .npmrc
npm install @trexolab/verifykit-react

Replace src/App.tsx with the React example from the React section above.

Add the CSS reset to src/index.css:

css

html, body, #root {
  height: 100%;
  margin: 0;
  padding: 0;
}

Start:

bash

npm run dev

No vite-plugin-wasm, no optimizeDeps config, no WASM file copying. The WASM binary is base64-embedded and loads automatically.

What's Next:

React Integration -- full component and hook reference
Customization -- theming, CSS variables, toolbar configuration
Deployment -- production checklist and environment-specific notes

Next Steps

Examples -- more advanced recipes: custom trust stores, Next.js integration, plugin configuration
Plugins -- core and viewer plugin system documentation
Architecture -- how the Rust/WASM core, plugin system, and verification pipeline work