---
title: "Integrate Document Authoring (WYSIWYG library) using npm"
canonical_url: "https://www.nutrient.io/sdk/document-authoring/getting-started/using-npm/"
md_url: "https://www.nutrient.io/sdk/document-authoring/getting-started/using-npm.md"
last_updated: "2026-06-09T10:25:14.600Z"
description: "Integrate Document Authoring — what you see is what you get (WYSIWYG) TypeScript library — into your web application using npm for in-browser visual editing without external word processing software."
---

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](https://www.npmjs.com/package/@nutrient-sdk/document-authoring).

## Requirements

- The [latest stable version of Node.js](https://nodejs.org/en/download/package-manager).

- A package manager compatible with [npm](https://docs.npmjs.com/about-npm). This guide contains examples for [Yarn](https://yarnpkg.com/), [pnpm](https://pnpm.io/), the [npm CLI](https://docs.npmjs.com/cli/commands/npm), and [Bun](https://bun.sh/). 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

```bash

npm install @nutrient-sdk/document-authoring

# or

yarn add @nutrient-sdk/document-authoring

# or

pnpm install @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:

   ```html

   <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:

   ```js

   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!'),
   });
   ```
---

## Related pages

- [Integrate Document Authoring (WYSIWYG library) using CDN](/sdk/document-authoring/getting-started/using-cdn.md)
- [Getting started with Document Authoring](/sdk/document-authoring/getting-started.md)
- [or](/sdk/document-authoring/getting-started/using-other-setups.md)
- [or](/sdk/document-authoring/getting-started/using-vite.md)