Install with Vite

Add Document Authoring to a Vite project.

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 non-static position and a defined width and height. This is the target document object model (DOM) element where the editor loads:

   <div id="editor" style="position: relative; width: 100%; height: 100vh;"></div>

2. Import the library:

   import DocAuth from '@nutrient-sdk/document-authoring';
   
   const system = await DocAuth.createDocAuthSystem();
   
   const editor = await system.createEditor(document.getElementById('editor'), {
     document: await system.createDocumentFromPlaintext('Hello, world!'),
   });

   For licensed deployments, pass your license key as the licenseKey property when you call createDocAuthSystem(). The key is optional for evaluation builds.

Running the Vite dev server

npm run dev

pnpm run dev

yarn run dev

bun run dev

Next steps

How Document Authoring works
The system, editor, and document model.

Document data and formats
Open and save DOCX, PDF, and DocJSON.