Integrate Document Authoring (WYSIWYG library) using Vite

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

npm create vite my-app

pnpm create vite my-app

yarn create vite my-app

bun create vite my-app

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.

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

   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

npm run dev

pnpm run dev

yarn run dev

bun run dev