Office Editor 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: DOCX EditorLive demo

Easily edit DOCX files directly in your browser without server-side dependencies or MS Office installations.

This demo allows you to:

• Upload your own DOCX file

• Add annotations and customize contents

• Edit the layout

• Download the updated document as DOCX

Implementation steps To add office document editing capability with WebViewer:

Step 1: Choose your preferred web stack for WebViewer 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, Claude Sonnet 3.5, 2025-07-31
// File: showcase-demos/office-editor/index.js

import WebViewer from '@pdftron/webviewer';

const licenseKey = 'YOUR_WEBVIEWER_LICENSE_KEY';

// List of sample DOCX files
 const docxFiles = [
  'https://pdftron.s3.amazonaws.com/downloads/pl/legal-contract.docx',
  'https://pdftron.s3.amazonaws.com/downloads/pl/Cover_Letter_Word.docx',
  'https://pdftron.s3.amazonaws.com/downloads/pl/report.docx'
];

const element = document.getElementById('viewer');
let theInstance = null;
const onLoad = async (instance) => {
  theInstance = instance;
  instance.Core.documentViewer.addEventListener('documentLoaded', () => {
    // here you can get the document and perform actions on it,
    const fileName = theInstance.Core.documentViewer.getDocument().getFilename();
    const fileExtension = fileName.substring(fileName.lastIndexOf('.'))
    if(fileExtension !== '.docx' && fileExtension !== '.doc') {
      alert('Document loaded, but it is not a DOC/DOCX file.');
    }
  });
};

// Initialize WebViewer with the first DOCX file and enable Office editing
WebViewer(
  {
    path: '/lib',
    licenseKey: licenseKey, 
    initialDoc: docxFiles[0], // Default to the first file in the list
    enableOfficeEditing: true,
    enableFilePicker: true, // Enable file picker to open files. In WebViewer -> menu icon -> Open File
  },
  element
).then((instance) => {
  onLoad(instance);
});

// Create a dropdown for files
const docxFileSelect = document.createElement('select');

// Populate the dropdown with options
docxFiles.forEach(file => {
  const option = document.createElement('option');
  option.value = file; // Use the full URL as the value
  option.textContent = file.substring(file.lastIndexOf('/') + 1); // Display only the file name
  docxFileSelect.appendChild(option);
});

// set default value for the dropdown
docxFileSelect.value = docxFiles[0]; // Default to first file
docxFileSelect.onchange = () => {
  // When the selected file changes, load the new document
  theInstance.UI.loadDocument(docxFileSelect.options[docxFileSelect.selectedIndex].value);
};
const filesLabel = document.createElement('label');
filesLabel.textContent = 'Choose a file to edit: ';
const uploadLabel = document.createElement('label');
uploadLabel.textContent = 'Or use the Open File command in the WebViewer UI menu to upload a DOCX file';

// UI section
//
// Helper code to add controls to the viewer holding the buttons and dropdown

// Create a container for all controls (label, dropdown, and buttons)
const controlsContainer = document.createElement('div');

// Apply classes for styling using CSS
filesLabel.className = 'label-class';
docxFileSelect.className = 'file-select';
controlsContainer.className = 'control-container';

// Append elements to the controls container
controlsContainer.appendChild(filesLabel);
controlsContainer.appendChild(docxFileSelect);
controlsContainer.appendChild(uploadLabel)
element.insertBefore(controlsContainer, element.firstChild);