Pre-Purchase Insights: Everything you need to know before you buy.

How to Bring DOCX Editor Into Any Angular Web App

By Andrey Safonov | 2023 Apr 10

Sanity Image
Read time

5 min

In this blog, you'll discover how to integrate a ready-made Angular DOCX Editor which enables you to craft and modify DOCX documents directly in your web app and browser without needing server-side components, Microsoft Office, or LibreOffice dependencies.

The Angular DOCX Editor comes packed with numerous sought-after word processing capabilities, making it perfect for elementary DOCX editing, review, and modification scenarios.

  • Create DOCX documents from a blank page.
  • Edit the contents of any existing DOCX document.
  • Alter styling (bold, italics, underline).
  • Manipulate fonts, font size, and set headings.
  • Align, justify, and control line spacing.
  • Insert bulleted or numbered lists.

The Apryse DOCX Editor leverages client-side processing for each of its various functionalities: The Word file is created and modified within the client’s memory, and you have the ability to open and store DOCX documents from local storage or through a URL, such as an AWS S3 Bucket. Upon saving the document, the generated blob can either be returned to your bucket, saved as an updated version, or just downloaded in native DOCX forma, or converted to PDF.

To understand why both end-users and software developers find embedding direct DOCX editing so valuable, read our launch blog.

Now let’s get this project off the ground: Read on for the step-by-step How-to guide, or watch the How-to video 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 Angular application, you can either do so by cloning our GitHub Angular sample repo 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

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

Enable DOCX Editing Functionality in Your Angular App

Copied to clipboard

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

	enableOfficeEditing: true, 

}, viewerElement)

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

Load a DOCX Document in Your Angular App

Copied to clipboard

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


  initialDoc: '', 

  enableOfficeEditing: true, 

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

or through load document API:




        filename: 'myfile.docx', 

        enableOfficeEditing: true, 


Save a DOCX Document in Your Angular 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 

Next Steps

Copied to clipboard

Having set up the DOCX editor in your Angular web application, you can now explore ways to modify its appearance and user experience.

Should you encounter issues or face any errors in the process, let’s chat on Discord!

For any inquiries related to pricing, kindly contact our sales team.

Sanity Image

Andrey Safonov

Director of Product

LinkedIn link

Share this post