COMING SOON: Fall 2024 Release

How to Embed DOCX Editor Into Your React Web App

By Andrey Safonov | 2023 Mar 31

Sanity Image
Read time

5 min

Looking to add robust DOCX editing to your native application without dependencies? The React DOCX Editor makes it easy with no Microsoft Office, LibreOffice, or server-side setup required.

In this guide, you'll learn how to quickly implement the out-of-the-box React DOCX Editor and enable your users to edit, manipulate, and revise DOCX files right in their browser.

The editor comes equipped with commonly used word processing tools, providing a flexible solution for DOCX creation, editing, revising and formatting needs:

  • Create entirely new DOCX documents.
  • Open and edit existing DOCX documents.
  • Change formatting of text (bold, italics, underline).
  • Alter fonts, font size, and set headings.
  • Align, justify, and control line spacing.
  • Insert bullets or numbered lists.

Apryse DOCX Editor takes advantage of client-side operations at each step of the process: The Word document is edited within the memory of the client, and you can load and save DOCX documents from local file storage or via URL, such as from an AWS S3 Bucket. When you then save the document, the resulting blob can be put back into your bucket, uploaded as a new version, downloaded as the native DOCX, or as a PDF document.

To learn more about why users and software developers alike see so much value in embedding native DOCX editing, head over to read our DOCX editing launch blog.


Now let’s get started:
Read on for the step-by-step How-to guide, and/or watch the How-to video below embedded below.

Install WebViewer Component

Copied to clipboard

DOCX Editor is built on top of Apryse’sWebViewer. WebViewer offers viewing and editing not just of DOCX documents but also PDFs, images, CAD, video, and many other formats.

To install WebViewer in your React application, you can either do so by cloning our React sample repo on Github, or by following our guide.

If you are installing through npm (node package manager), you can simply run:

npm i @pdftron/webviewer

WebViewer comes with a free trial for 7 days. If you would like to extend the trial duration, you can generate a free trial key after signing up at https://dev.apryse.com.

In trial mode, all features are available except a watermark on output documents.

Enable DOCX Editing Functionality in Your React App

Copied to clipboard

Once you have WebViewer up and running, go to the constructor of WebViewerand pass the option to enable Office editing:

WebViewer({ 
	enableOfficeEditing: true, 

}, viewerElement)

Once you have that, restart your app and you should see DOCX editor.

Load a DOCX Document in Your React App

Copied to clipboard

To load an existing DOCX document in your React web app, you can do so either through initial document property:

WebViewer({ 

  initialDoc: 'https://myserver.com/myfile.docx', 

  enableOfficeEditing: true, 

}, document.getElementById('viewer')); 

or through load document API:

instance.UI.loadDocument( 

      'https://myserver.com/myfile.docx', 

      { 

        filename: 'myfile.docx', 

        enableOfficeEditing: true, 

      }); 

Save a DOCX Document in Your React App

Copied to clipboard

To save the edited or newly created DOCX, use the getFileData API:

const doc = documentViewer.getDocument(); 
const data = await doc.getFileData(); 
const arr = new Uint8Array(data); 
const blob = new Blob([arr], { type: 'application/pdf' }); 
// Add code for handling Blob here 

Discover how to create a JavaScript-based DOCX editor with client-side capabilities. Learn to build, edit, and save documents efficiently in this comprehensive guide.

Next Steps

Copied to clipboard

With the DOCX editor now integrated into your JavaScript web app, you're ready to unlock powerful document editing right in the browser. Now you can explore how to customize the editor's styling and interface to match your app's look and feel. The possibilities are endless for enhancing your app's functionality and user experience!

If you had trouble with any of the steps or ran into an error, you can also chat with us on Discord.

If you would like to inquire about pricing, please reach out to our sales team.

Sanity Image

Andrey Safonov

Director of Product

LinkedIn link

Share this post

email
linkedIn
twitter