Enable Apryse DOCX Editor

Requirements

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

Package: DOCX EditorLive demo

Create and edit DOCX files without any server‑side dependencies. WebViewer enables Microsoft Office file editing directly in the browser—no intermediate format conversions or Microsoft Office installations required. For more, see the DOCX Editor overview.

A docs file open in DOCX Editor

If you have a URL for a document, you can pass it to the WebViewer constructor or loadDocument function to open it.

You can also, alternatively, open a new, blank DOCX file through the WebViewer constructor.

Get started videos

Explore the React and Svelte tabs to learn how to integrate WebViewer and enable the Apryse DOCX Editor in Apryse WebViewer. Each tab includes a corresponding video.

• The React video shows how to integrate Apryse WebViewer with the DOCX Editor enabled, then opens an existing DOCX file in a React project.
• The Svelte video shows the same WebViewer integration in a Svelte project, but opens a new, blank DOCX file inside the viewer.

You can skip the videos and go to the Enable and open existing DOCX document section to get started.

React

Integrate WebViewer and DOCX Editor into a React app

Svelte

Integrate WebViewer and DOCX Editor into a Svelte app

Prerequisites

Before you start:

• Install Node.js and npm. We recommend using the latest active LTS release.
• Create a folder for your project.
• Integrate WebViewer into your project.
• Open a text editor like Visual Studio Code.
• Get your Apryse trial key.

Enable and open existing DOCX document

If you have a URL for a document, you can pass it to the WebViewer constructor or loadDocument function to open it.

WebViewer constructor

Load the office document with the WebViewer constructor, and it will load with the viewer.

JavaScript

WebViewer({
  ...,
  initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/report.docx',
  initialMode: WebViewer.Modes.DOCX_EDITOR,
}, document.getElementById('viewer'));

WebViewerOptions initialModes

This is an example of how the code might look in an HTML project where WebViewer is integrated, and DOCX Editor is enabled:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Basic WebViewer</title>
</head>

<body>
  <!-- Add WebViewer container -->
  <div id="viewer" style="width: 100%; height: 100vh; margin: 0 auto;"></div>
  
  <!-- Load WebViewer library -->
  <script src="/lib/webviewer/webviewer.min.js"></script>

  <script>
    WebViewer(
      {
        // Path to the 'lib' folder
        path: "/lib/webviewer",
        licenseKey: "YOUR_LICENSE_KEY",
        initialDoc: "https://pdftron.s3.amazonaws.com/downloads/pl/report.docx",
        initialMode: WebViewer.Modes.DOCX_EDITOR,

        // You can also load documents from your server:
        // initialDoc: "/path/to/my/file.pdf",
      },
      document.getElementById("viewer")
    ).then((instance) => {
      const { documentViewer, annotationManager } = instance.Core;

      // Call methods from instance, documentViewer, and annotationManager as needed
      // Access additional namespaces as follows:
      // const Tools = instance.Core.Tools;
      // const Annotations = instance.Core.Annotations;

      documentViewer.addEventListener("documentLoaded", () => {
        // Call methods relating to the loaded document
      });
    });
  </script>
</body>
</html>

Load document

Load the office document with the loadDocument() method after WebViewer is initialized.

JavaScript

WebViewer(...)
  .then(instance => {
    instance.UI.loadDocument(
      'https://pdftron.s3.amazonaws.com/downloads/pl/report.docx',
      {
        filename: 'report.docx',
        initialMode: WebViewer.Modes.DOCX_EDITOR,
      });
  });

WebViewer WebViewerInstance.UI.loadDocument

Enable and open new, blank DOCX document

You can open a new, blank DOCX file through the WebViewer constructor.

WebViewer constructor

Initialize WebViewer constructor without the initialDoc property, and the viewer will load with an empty document, ready to be edited.

JavaScript

WebViewer({
  ...,
  enableOfficeEditing: true,
}, document.getElementById('viewer'));

WebViewer

IME keyboard support

DOCX Editor supports Input Method Editor (IME) keyboard input via string composition, enabling complex text input. This includes proper text entry for languages such as Chinese, Japanese, and Korean, as well as other languages that rely on composition events. This feature is not enabled by default.

IME support in the DOCX Editor is controlled through:

• A constructor option to enable composition input by default.
• Runtime APIs to enable, disable, or inspect composition state.

WebViewer IME constructor option

To enable string composition when initializing DOCX Editor, set enableCompositionInput to true as shown in the constructor here:

JavaScript

WebViewer({
  path: '/lib',
  enableOfficeEditing: true,
  enableCompositionInput: true
}, document.getElementById('viewer'));

This approach should be used if you anticipate that your application will support multilingual keyboard input by default.

IME runtime composition APIs

To dynamically enable, disable, or check the status of IME string composition, use the following APIs:

• enableCompositionInput()
• disableCompositionInput()
• isCompositionActive()

These APIs allow you to toggle IME support based on user preferences or locale.

Next steps

To explore additional document workflows and features, see:

• Learn about the DOCX Editor
• Track changes in DOCX files
• Manage DOCX edit modes