Integrate Document Authoring (WYSIWYG library) using other setups

If you’re not using a bundler such as Vite, webpack, or Rollup, you can include the Document Authoring library by copying the main entry point file into your project, by serving your node_modules directory, or by using import maps(opens in a new tab) to define module imports. This guide will cover the first option as an example.

If you’re looking to self-host all assets, refer to our self-hosting assets guide.

You can also load everything directly from the content delivery network (CDN) with a single script tag.

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.

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.

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. Copy docauth.es.js from node_modules/@nutrient-sdk/document-authoring/lib/ to your public directory (e.g. public/js/).

2. Import the library:

   const DocAuth = await import('/lib/docauth.es.js');
   
   const docAuthSystem = await DocAuth.createDocAuthSystem()
   
   const editor = await docAuthSystem.createEditor(document.getElementById('editor'),{
     document: await docAuthSystem.createDocumentFromPlaintext('Hi there!'),
   })