Document Authoring library

The WYSIWYG Document Authoring library seamlessly integrates authoring into your web application, eliminating the need for external word processing software. It offers a type-safe, in-browser visual editor for fast, page-based editing. The high-fidelity renderer ensures exported documents look exactly the same as when editing, delivering a true WYSIWYG experience.

Get started Launch demo

How Document Authoring works

Document Authoring provides document and spreadsheet editing in the browser. The editing engine ships in the same package as the UI, so documents open, render, and export on the client. You don’t need to call a server, and documents don’t leave the page unless your application sends them somewhere.

The system, editor, and document

Most integrations use three core objects:

• The system — DocAuthSystem holds the editing engine and fonts. Create one system and keep it for the life of the page.
• The editor — DocAuthEditor is the visual editor attached to a DOM element. Users type into the editor.
• The document — DocAuthDocument is the content an editor displays. Loading, saving, exporting, and programmatic edits happen on the document, not the editor.

Create the system once. Then use it to create documents and editors:

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

createDocAuthSystem() takes no required configuration. Call it without arguments for the default setup, or pass optional licenseKey, assets, and fontConfig values. For more information, refer to the fonts and self-hosting assets guides.

The same DocAuthSystem also creates and imports spreadsheets. Use createSpreadsheetEditor() to display a spreadsheet in its own grid editor. For the spreadsheet objects and workflow, refer to the spreadsheets guide.

DocJSON and SheetJSON

Document Authoring stores word-processing documents internally as DocJSON and spreadsheets as SheetJSON. DOCX, PDF, RTF, ODT, and Markdown are imported into DocJSON or exported from it.

DocJSON roundtrips without loss and uses plain JSON, so use it to persist, diff, or generate documents without showing the editor. For more information, refer to the DocJSON guide.

Document Authoring imports XLSX files into SheetJSON and exports them from it. Spreadsheets also support PDF export. For more information, refer to the SheetJSON guide.

Editing in transactions

To change a document from code, run a transaction against a draft and commit it atomically:

await doc.transaction(async ({ draft }) => {
  const paragraph = draft.body().content().addParagraph();
  paragraph.asTextView().setText('Added programmatically.');
  return true;
});

The programmatic API covers text, tables, images, comments, and page setup. For more information, refer to the programmatic editing guide.

Editor modes

An editor is always in edit, review, or view mode. Review mode records edits as tracked changes. View mode is read-only. For more information, refer to the tracked changes and editor modes guide.

Run on the client

The engine runs on the client, so you can self-host its assets and run the editor offline. For more information, refer to the self-hosting assets guide.

Browser support

Document Authoring supports the latest versions of all commonly used browsers: Chrome, Mozilla Firefox, Safari, and Edge. You can see the full list on our browser support page.