PDF Editing Showcase Demo Code Sample

Requirements

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

Web SDKLive demo

Easily enable editing underlying PDF text and images. For instance, edit the paragraph text, resize, or move anywhere on the page and download your edited file.

This demo allows you to:

• Upload your own PDF file
• Edit the layout and content
• Download the updated PDF

Implementation steps

To edit 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 v1.0, July 10, 2025
// File name: index.js

import WebViewer from '@pdftron/webviewer';

const licenseKey = 'YOUR_WEBVIEWER_LICENSE_KEY';

const initialDoc        = 'https://apryse.s3.us-west-1.amazonaws.com/public/files/samples/pdf_text_editing_walkthrough.pdf';
const disabledElements  = [
  'toolbarGroup-View',
  'toolbarGroup-Annotate',
  'toolbarGroup-Shapes',
  'toolbarGroup-Redact',
  'toolbarGroup-Insert',
  'toolbarGroup-FillAndSign',
  'toolbarGroup-Forms',
  'toolbarGroup-Measure',
  'cropToolGroupButton',
];
const EnabledElements  = [
  'toolbarGroup-EditText',
  'addParagraphToolGroupButton',
  'addImageContentToolGroupButton',
  'searchAndReplace',
];

WebViewer(
  {
    path: '/lib',
    initialDoc: initialDoc,
    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);
});

const customizeUI = (instance) => {
  const { UI } = instance;

  // Enable the tools to edit the PDF content
  UI.enableFeatures([UI.Feature.ContentEdit]);

  // disable unnecessary elements and enable the text editing tools
  UI.disableElements(disabledElements);
  UI.enableElements(EnabledElements);

  // Set the toolbar group to the text editing tools
  UI.setToolbarGroup('toolbarGroup-EditText');

  // Reset Walkthrough button
  const resetButton = new UI.Components.CustomButton({
    dataElement: 'resetButton',
    className: 'custom-button-class',
    label: 'Reset Walkthrough',
    onClick: () => UI.loadDocument(initialDoc), // Reset the viewer to the initial state
    style: {
      backgroundColor: 'white',
      color: 'blue',
      border: '1px solid blue',
    }
  });

  // Download Pdf button
  const downloadButton = new UI.Components.CustomButton({
    dataElement: 'downloadPdfButton',
    className: 'custom-button-class',
    label: 'Download as PDF',
    onClick: () => downloadPdf(instance), // Download the PDF with annotations
    style: {
      backgroundColor: 'blue',
      color: 'white',
    }
  });

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

const downloadPdf = async (instance) => {
  const options = {
    flags: instance.Core.SaveOptions.LINEARIZED,
    downloadType: 'pdf'
  };

  instance.UI.downloadPdf(options);
};