---
title: "Integrate Document Authoring (WYSIWYG library) using Vite"
canonical_url: "https://www.nutrient.io/sdk/document-authoring/getting-started/using-vite/"
md_url: "https://www.nutrient.io/sdk/document-authoring/getting-started/using-vite.md"
last_updated: "2026-05-30T02:20:01.489Z"
description: "Integrate Document Authoring — what you see is what you get (WYSIWYG) TypeScript library — into your web application using Vite 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 Vite. By following these steps, you’ll be able to set up in-browser visual editing capabilities without the need for external word processing software.

## Creating a new Vite project

```bash

npm create vite

# or

yarn create vite

# or

pnpm create vite

```

Change to the newly created project directory:

```

cd my-app

```

## Installing the library

For a new project, set up the environment to include `@nutrient-sdk/document-authoring`.

```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 the library:

   ```javascript

   import { createDocAuthSystem } from '@nutrient-sdk/document-authoring';

   (async () => {
     const docAuthSystem = await createDocAuthSystem();

     const editor = await docAuthSystem.createEditor(document.getElementById('editor'), {
       document: await docAuthSystem.createDocumentFromPlaintext('Hello world!'),
     });
   })();
   ```

## Running the Vite dev server

```bash

npm run dev

# or

yarn dev

# or

pnpm dev

```

---

## Related pages

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