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 position set to a value other than static, and with a defined width and height. This will be the target document object model (DOM) element where the editor will be loaded:

   <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!'),
   });

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.

Working with documents
Open and save DOCX, PDF, and DocJSON.