Integrate Document Authoring (WYSIWYG library) using npm

This guide walks you through the process of integrating the Document Authoring — what you see is what you get (WYSIWYG) TypeScript library — into your web application using npm. By following these steps, you’ll be able to set up in-browser visual editing capabilities without the need for external word processing software.

For a direct integration, the library is available through the npm registry(opens in a new tab).

Requirements

• The latest stable version of Node.js(opens in a new tab).
• A package manager compatible with npm(opens in a new tab). This guide contains examples for Yarn(opens in a new tab), pnpm(opens in a new tab), the npm CLI(opens in a new tab), and Bun(opens in a new tab). The npm CLI is installed with Node.js by default.

You need Node.js to complete this guide, but in general, Node.js isn’t a requirement for using the Document Authoring library.

Type definitions and module systems

We provide type definitions and support for CommonJS, ESM, AMD, and a global DocAuth object from the same package. These should be resolved automatically from our package.json file.

Adding to your project

npm i @nutrient-sdk/document-authoring

pnpm add @nutrient-sdk/document-authoring

yarn add @nutrient-sdk/document-authoring

bun add @nutrient-sdk/document-authoring

Integrating into your project

1. Add an empty <div> element with a position set to a value other than static, and with a defined width and height. This will be the target DOM element where the editor will be loaded:

   <div id="editor" style="position: relative; width: 100%; height: 100vh; border: 1px solid #dcdcdc;"></div>

2. Import @nutrient-sdk/document-authoring into your application and initialize the editor:

   import DocAuth from '@nutrient-sdk/document-authoring';
   
   const docAuthSystem = await DocAuth.createDocAuthSystem();
   
   const editor = await docAuthSystem.createEditor(document.getElementById('editor'), {
     document: await docAuthSystem.createDocumentFromPlaintext('Hi there!'),
   });