@tiptap/static-renderer

Introduction

Tiptap is a headless wrapper around ProseMirror – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as New York Times, The Guardian or Atlassian.

Official Documentation

Documentation can be found on the Tiptap website.

Limitations & workarounds

The static renderer builds the ProseMirror schema and runs each extension's renderHTML, but it does not instantiate an Editor. As a result:

• addProseMirrorPlugins, onCreate, onUpdate, and transaction hooks do not run.
• Extensions that assign attributes via those mechanisms — such as UniqueID (data-id) and TableOfContents (id, data-toc-id) — will not populate those attributes on their own.

For these cases, pre-process the JSON document before rendering:

import { generateUniqueIds } from '@tiptap/extension-unique-id'
import { generateTocIds } from '@tiptap/extension-table-of-contents'
import { renderToHTMLString } from '@tiptap/static-renderer/pm/html-string'

let doc = sourceJson
doc = generateUniqueIds(doc, extensions) // if using UniqueID
doc = generateTocIds(doc, extensions) // if using TableOfContents

const html = renderToHTMLString({
  content: doc,
  extensions,
  staticEditorOptions: { textDirection: 'auto' }, // mirrors a subset of EditorOptions
})

Editor-level options that affect output are accepted via the staticEditorOptions object (currently textDirection). Other editor options that depend on a runtime view or transaction stream are out of scope.

License

Tiptap is open sourced software licensed under the MIT license.