PDF Form Build Showcase Demo Code Sample

Requirements

These packages are required to use these features in production. Trial keys have unlimited access to all features

Web SDKPackage: Digital SignatureLive demo

Quickly enhance an existing PDF template by adding form fields. Start by placing your own fields as annotations, then convert them into interactive form fields. Choose from a variety of field types—including text boxes, signatures, checkboxes, and more—to build a fully functional PDF form.

This demo allows you to:

• Upload your own PDF file
• Add and customize form fields
• Edit the layout and content
• Download the updated PDF

Implementation steps To add form fields to a PDF with WebViewer:

Step 1: Choose your preferred web stack Step 2: Add the ES6 JavaScript sample code provided in this guide

Once you generate your license key, it will automatically be included in your sample code below.

// ES6 Compliant Syntax
// GitHub Copilot v1.0 - GPT-4o model - July 20, 2025
// File: index.js

import WebViewer from '@pdftron/webviewer';

const licenseKey = 'YOUR_WEBVIEWER_LICENSE_KEY';

// Customize the WebViewer UI
const customizeUI = (instance) => {
  const { UI } = instance;

  // Enable Measurement tab
  UI.enableFeatures([UI.Feature.Measurement]);

  // Set the toolbar group to the forms tools
  UI.setToolbarGroup('toolbarGroup-Forms');
  UI.setToolMode(instance.Core.Tools.ToolNames.TEXT_FORM_FIELD);

  // Download button
  const downloadButton = new UI.Components.CustomButton({
    dataElement: 'downloadPdfButton',
    className: 'custom-button-class',
    label: 'Download',
    onClick: () => download(instance), // Download with annotations
    style: {
      padding: '10px 20px',
      backgroundColor: 'blue',
      color: 'white',
    }
  });

  const defaultHeader = UI.getModularHeader('default-top-header');
  defaultHeader.setItems([...defaultHeader.items, downloadButton]);
};

// Download the PDF
const download = async (instance) => {

  // Set the options for downloading the PDF
  const options = {
    flags: instance.Core.SaveOptions.LINEARIZED,
    downloadType: 'pdf'
  };

  instance.UI.downloadPdf(options);
};

WebViewer(
  {
    path: '/lib',
    initialDoc: 'https://apryse.s3.us-west-1.amazonaws.com/public/files/samples/arrest-warrant-signed.pdf',
    enableFilePicker: true, // Enable file picker to open files. In WebViewer -> menu icon -> Open File
    licenseKey: licenseKey,
  },
  document.getElementById('viewer')
).then((instance) => {

  // customize WebViewer UI
  customizeUI(instance);

  console.log('✅ WebViewer loaded successfully.');
}).catch((error) => {
  console.error('❌ Failed to initialize WebViewer:', error);
});