First-Class JSON Support with DocJSON

DocJSON is the internal format used by the Document Author library, and it’s designed for high portability and custom integrations. This document representation retains the good parts of existing formats, but it fits better with modern tooling and APIs that often exchange data in JSON. An intermediary format was important for us to maximize the versatility of the library, to integrate better with web technologies, and to provide the best possible developer experience.

DocJSON is used when loading and saving from the editor. The format is easy to understand, and it can be modified outside the editor to fit your custom workflows, including templating and document generation. If you can modify JSON on the client or server, you can generate documents that the Document Authoring library can open and export (in multiple formats).

It’s our intention to fully document the format and push document handling toward more modern alternatives, with better interoperability. You can see a simple example of the format at the end of this guide.

Working with DocJSON in the Editor

Before you start, ensure you have the Document Authoring library installed and running. Check out the getting started guides for more information.

Any error handling in the examples below is left out for brevity.

Loading DocJSON

Use the DocAuthSystem.loadDocument method:

// Assuming the `docAuthSystem` instance exists.

const document = await docAuthSystem.loadDocument(
	await fetch('./document.json').then((response) => response.json()),
);

const editor = await docAuthSystem.createEditor(
	document.getElementById('editor'),
	{ document },
);

Saving DocJSON

Use the DocAuthDocument.saveDocument or DocAuthDocument.saveDocumentJSONString method:

// Assuming the `editor` instance exists.

const currentDoc = editor.currentDocument();

const docObj = await currentDoc.saveDocument();
console.log('JS object', docObj);

const docJSON = await currentDoc.saveDocumentJSONString();
console.log('JSON string', docJSON);

Example

The example below shows how simple a document can be (any formatting styles and page setup are optional and will fall back to defaults). You can see from the properties in the JSON that this is version 1 of the container format, which represents documents as a body, with sections containing elements of different types, which themselves contain inline elements. In this instance, our document is a single paragraph containing a single text run of Hello world!. Inline elements, such as text runs, are modeled as a flat sequence as opposed to being nested like HTML:

{
	"type": "https://pspdfkit.com/document-authoring/persistence/container",
	"version": 1,
	"container": {
		"document": {
			"body": {
				"sections": [
					{
						"elements": [
							{
								"type": "p",
								"elements": [
									{
										"type": "r",
										"text": "Hello world!"
									}
								]
							}
						]
					}
				]
			}
		}
	}
}

Exploring More

If you’re interested in diving deeper into the DocJSON format, reach out to us.