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

Terminal window
npm 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.

Terminal window
npm i @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

Terminal window
npm run dev