Section:

Get started with Apryse DOCX Editor

Requirements
View Demo
Package: DOCX Editor

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 docx file open in DOCX Editor

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.

Integrate WebViewer and DOCX Editor into a React 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.

License Key

Apryse collects some data regarding your usage of the SDK for product improvement.

If you wish to continue without data collection, contact us and we will email you a no-tracking trial key for you to get started.

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

1WebViewer({
2  ...,
3  initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/report.docx',
4  initialMode: 'docxEditor',
5}, document.getElementById('viewer'));

Related Links

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

HTML

index.html

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8" />
5  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6  <title>Basic WebViewer</title>
7</head>
8
9<body>
10  <!-- Add WebViewer container -->
11  <div id="viewer" style="width: 100%; height: 100vh; margin: 0 auto;"></div>
12  
13  <!-- Load WebViewer library -->
14  <script src="/lib/webviewer/webviewer.min.js"></script>
15
16  <script>
17    WebViewer(
18      {
19        // Path to the 'lib' folder
20        path: "/lib/webviewer",
21        licenseKey: "YOUR_LICENSE_KEY",
22        initialDoc: "https://pdftron.s3.amazonaws.com/downloads/pl/report.docx",
23        initialMode: "docxEditor",
24
25        // You can also load documents from your server:
26        // initialDoc: "/path/to/my/file.pdf",
27      },
28      document.getElementById("viewer")
29    ).then((instance) => {
30      const { documentViewer, annotationManager } = instance.Core;
31
32      // Call methods from instance, documentViewer, and annotationManager as needed
33      // Access additional namespaces as follows:
34      // const Tools = instance.Core.Tools;
35      // const Annotations = instance.Core.Annotations;
36
37      documentViewer.addEventListener("documentLoaded", () => {
38        // Call methods relating to the loaded document
39      });
40    });
41  </script>
42</body>
43</html>

Load document

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

JavaScript

1WebViewer(...)
2  .then(instance => {
3    instance.UI.loadDocument(
4      'https://pdftron.s3.amazonaws.com/downloads/pl/report.docx',
5      {
6        filename: 'report.docx',
7        initialMode: 'docxEditor',
8      });
9  });

Related Links

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

1WebViewer({
2  ...,
3  enableOfficeEditing: true,
4}, document.getElementById('viewer'));

Related Links

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

1WebViewer({
2  path: '/lib',
3  enableOfficeEditing: true,
4  enableCompositionInput: true
5}, 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:

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

Next steps

To explore additional document workflows and features, see:

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales