Getting Started with TypeScript DOCX Editor

19 Aug 20265 minutes to read

TypeScript DOCX Editor (Document Editor) enables you to create, edit, view, and print Word documents in web applications. This section guides you through the steps to get started and create a DOCX Editor in a TypeScript application.

Prerequisites

To get started, ensure the following software is installed on your machine:

Set up development environment

Create a simple TypeScript application using the Essential® JS 2 quickstart seed repository.

NOTE

This application is integrated with the webpack.config.js configuration and uses the latest version of the webpack-cli. For more information about webpack and its features, refer to the webpack documentation.

Step 1: Open the command prompt from the required directory and clone the quickstart project from GitHub.

git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack ej2-quickstart

Step 2: Navigate to the ej2-quickstart folder.

cd ej2-quickstart

Install the DOCX Editor package

By default, the ej2‑quickstart repository is preconfigured with the @syncfusion/ej2 package in ~/package.json. This package installs all Syncfusion Essential JS 2 component packages, including the DOCX Editor and other EJ2 controls.

To install only the DOCX Editor component, replace the dependency with @syncfusion/ej2-documenteditor, as shown below:

"dependencies": {
  "@syncfusion/ej2-documenteditor": "*"
}

Install the dependent npm packages using the following command.

npm install

Import the required CSS styles

Themes for DOCX Editor can be applied using CSS or SASS files from the npm theme packages, CDN, CRG, or Theme Studio. For more information, see the themes documentation.

This guide uses the Tailwind 3 theme as an example, sourced from the theme package. In this package, each component includes an index.css file that automatically loads all the required dependency styles. To install the Tailwind 3 theme package, use the following command:

npm install @syncfusion/ej2-tailwind3-theme

By default, projects include an ~/src/styles/styles.css file with default styles. These default styles may conflict with Syncfusion component styles. Clear all content from the styles.css file to prevent style conflicts.

The required styles for the DOCX Editor are imported in the styles.css file:

@import "../../node_modules/@syncfusion/ej2-tailwind3-theme/styles/document-editor/index.css";
@import "../../node_modules/@syncfusion/ej2-tailwind3-theme/styles/document-editor-container/index.css";

Register a Syncfusion License Key

Before initializing the DOCX Editor control, generate a Syncfusion license key and register it in your application.

Initialize the DOCX Editor

Add an HTML div element to act as the DOCX Editor element in the index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Syncfusion TypeScript DOCX Editor</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Syncfusion TypeScript DOCX Editor" />
    <meta name="author" content="Syncfusion" />
    <link rel="shortcut icon" href="resources/favicon.ico" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <!-- Element which will render as DOCX Editor -->
    <div id="DocumentEditor"></div>
</body>
</html>

Add a container element for the DOCX Editor control in the app.ts file using the following code.

import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';

DocumentEditorContainer.Inject(Toolbar);

let documenteditor: DocumentEditorContainer = new DocumentEditorContainer({
    enableToolbar: true,
    height: '590px',
    // Use the following service URL only for demo purposes
    serviceUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'
});
documenteditor.appendTo('#DocumentEditor');

NOTE

The hosted Web API URL is for demo and evaluation purposes only. For production, host your own web service using the GitHub Web Service example or the Docker image.

Run the application

Run the application using the following command. The quickstart template includes webpack dev server configuration that automatically builds and serves the application:

npm start

After the application starts, open the localhost URL shown in the terminal. The TypeScript DOCX Editor is rendered in the browser with a toolbar and an editable document area, as shown below.

Output of TypeScript DOCX Editor

You can also explore the DOCX Editor interactively using the live sample below.

NOTE

View Sample in GitHub.

Online Demo

Explore how to create, edit, and print Word documents using the JavaScript DOCX Editor in this live demo here.

Server-side dependencies

The DOCX Editor component requires server-side interactions for the following operations:

  • Open file formats other than SFDT
  • Paste with formatting
  • Restrict editing
  • Spell check
  • Save as file formats other than SFDT and DOCX

NOTE

If you don’t require the above functionalities, you can deploy the component as a pure client-side solution without any server-side interactions.

For detailed information about server-side web services, refer to the Web Services Overview page.

See also