@nutrient-sdk/document-authoring

Document Authoring SDK

The Document Authoring SDK provides a way to seamlessly embed document authoring capabilities into your web app. It's a WYSIWYG editor that provides features traditionally found only in desktop word processors. You can read more and try a demo on our dedicated product page.

✨ Feature Requests & Feedback

To help us shape this new authoring experience, we highly value your feedback! Please submit any feature requests or bug reports to [e-mail] with the subject line "Document Authoring: Feature Request/Bug Report". We appreciate your contributions and are excited to hear your thoughts!

💻 Installation

The package is available on npm, and can be installed with your package manager of choice. The package name is @nutrient-sdk/document-authoring.

npm install @nutrient-sdk/document-authoring

⚡️ Quickstart

The visual editor needs a suitable target DOM element:

<!--
  IMPORTANT: An editor target element needs to have its `position` set to a value other than the default or `static`!
  If unsure use `relative`.
-->
<div id="editor" style="position: relative; border: 1px solid black; width: 1024px; height: 600px;"></div>

The npm package can then be imported and the target set to the element:

import DocAuth from '@nutrient-sdk/document-authoring';

const docAuthSystem = await DocAuth.createDocAuthSystem()

const editor = await docAuthSystem.createEditor(document.getElementById('editor'),{
  document: await docAuthSystem.createDocumentFromPlaintext('Hi there!'),
})

For a typical setup, this is all that's needed.

Other methods

In a static context (with no bundler) you can use the file found at lib/docauth.es.js in the package (located in node_modules/@nutrient-sdk/document-authoring/lib/docauth.es.js if you installed the SDK via npm).

With the default configuration (CDN assets) this is the only file you need at runtime. If you use this file in your application you will need to use a dynamic import:

// Replace `/lib/docauth.es.js` with the path where the file is available in your setup.
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!'),
})

Alternatively a version that can be included via a script tag is available at lib/docauth.umd.js in the package (located in node_modules/@nutrient-sdk/document-authoring/lib/docauth.umd.js if you installed the SDK via npm).

<script src="lib/docauth.umd.js"></script>
<script>
  (async()=>{
    const docAuthSystem = await DocAuth.createDocAuthSystem()
    const editor = await docAuthSystem.createEditor(document.getElementById('editor'),{
      document: await docAuthSystem.createDocumentFromPlaintext('Hi there!'),
    })
  })()
</script>

Example

You can download an example project demoing both TypeScript and JavaScript integration from here, unzip it and run:

npm install
npx vite serve

Fetching assets

By default, the Document Authoring SDK will fetch the required files (fonts, emoji data, etc.) from a public CDN, and no further configuration is needed. See below for instructions on how to self-host assets.

Self-hosting the assets

To host the assets on your own infrastructure you can download them from here and deploy them to a suitable location. Provide an appropriate base path when initializing the Document Authoring SDK.

Example:

// Alternatively you can use `import DocAuth from '@nutrient-sdk/document-authoring'` if you have a bundler set up.
// Replace `/lib/docauth.es.js` with the path where the file is available in your setup.
const DocAuth = await import('/lib/docauth.es.js');

const docAuthSystem = await DocAuth.createDocAuthSystem({
  assets: {
    // Replace '/document-authoring-assets/' with the path where the assets are available.
    base: '/document-authoring-assets/',
  },
});

🧾 License

Copyright (c) 2024-present PSPDFKit GmbH. See the evaluation license for more information.