Apryse Speedrun

Five timed, hands-on challenges for the Apryse WebViewer SDK (Apryse was formerly PDFTron). Build a React app that customizes the viewer UI, generates a document from a template, finds and redacts PII, compares the results, and signs and exports the final PDF.

These challenges go with the Apryse Speed Runs video playlist, where Apryse Solution Engineers race against the clock on real-world Apryse Document SDK challenges. Watch to see how they do it, or try the challenges yourself first.

Quick facts

• Challenges: 5 (UI customization, templating, PII redaction, before/after comparison, signing and export)
• Requires: Node.js and an Apryse WebViewer trial key

Apryse Showcase try WebViewer features live before

Getting Started

1. Install dependencies: npm install

2. Copy static assets. WebViewer requires specific static assets (UI and Core engines) to be served publicly. Copy the core and ui folders located in node_modules/@pdftron/webviewer/public into public/webviewer/lib.

   mkdir -p public/webviewer/lib && cp -r node_modules/@pdftron/webviewer/public/* public/webviewer/lib

3. Create a .env file and add your Apryse license key: cp .env.example .env

4. Start the dev server: npm run dev

Challenge 1: WebViewer Initialization + UI Customization

Challenge 1 YouTube video

Goal: Personalize your WebViewer instance Tasks:

• Initialize WebViewer using React
• Remove the print button
• Change the theme to dark
• Add a company logo to the header

Helpful Docs Links

• Remove print button disable elements

• Change theme to dark set theme

• Add company logo docs example

Challenge 2: Generate a Document Using the Templating API

Challenge 2 YouTube video

Goal: Turn JSON into a polished, filled PDF

Tasks:

• Use the Templating API to inject data into a template (e.g., invoice, certificate)
• Show the generated document in WebViewer
• Export the result as a flattened PDF

Helpful docs

• Generate PDF from DOCX template: docs example

Challenge 3: Find and Redact PII

Challenge 3 YouTube video

Goal: Detect and redact sensitive data like emails and phone numbers

Tasks:

• Load a document with fake PII
• Use search + regex to find emails, SSNs, phone numbers, etc.
• Apply redactions to each match

Helpful docs

• Redact PII: docs example
• Blog: Redact PII from PDFs with the Apryse SDK
• Blog: AI-powered PII redaction in WebViewer

Challenge 4: Compare Original vs Redacted

Challenge 4 YouTube video

Goal: Show before-and-after versions of the document

Tasks:

• Use a side-by-side WebViewer layout
• Load the original and redacted versions
• Visually confirm the redactions

Helpful docs

• Compare PDF Changes docs example

Challenge 5: Add a Signature and Export

Challenge 5 YouTube video

Goal: Sign the redacted document and finalize it

Tasks:

• Add a signature widget programmatically or from the UI
• Sign using type/draw
• Flatten and download the final PDF

Helpful docs

• Flatten form showcase demo
• Flatten PDF forms using JavaScript

For AI agents: Apryse documentation has an index at docs.apryse.com/llms.txt, and Markdown versions of doc pages are available by appending .md to the page URL.