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 [email protected] 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.

Headless Node.js

The package exposes a headless Node.js entry for import, export, and programmatic document work:

import { createDocAuthSystem } from '@nutrient-sdk/document-authoring/node';

const system = await createDocAuthSystem();

By default, small runtime files come from the installed package and built-in font files are loaded from Nutrient's CDN when a document needs them. To use the SDK without network access, download the matching Node asset directory while you are connected:

npx document-authoring download-assets --write-to ./document-authoring-assets

Transfer that directory unchanged to the server, then pass its path when creating the system:

const system = await createDocAuthSystem({
	assets: { base: '/opt/document-authoring-assets' },
});

The downloaded directory is an extracted copy of the regular browser asset archive, tied to the exact SDK version through its content-hashed filenames. The system checks all required files when it starts. To use your own hosted copy instead, deploy the same archive and pass its HTTPS base URL.

SDK assets and your own fonts are configured separately. assets.base locates the SDK's engine, templates, dictionaries, and built-in fonts. Add your organization's fonts through fontConfig, for example with files read from disk or with a generated font index whose loadFn reads each font from disk.