Tiptap Docs

HTML Utility

VersionDownloads

The HTML Utility helps render JSON content as HTML and generate JSON from HTML without an editor instance, suitable for server-side operations. All it needs is JSON or a HTML string, and a list of extensions.

Generating HTML from JSON

Given a JSON object, representing a prosemirror document, the generateHTML function will return a string object representing the JSON content. The function takes two arguments: the JSON object and a list of extensions.

/* IN BROWSER ONLY - See below for server-side compatible package */
import { generateHTML } from '@tiptap/core'

// Generate JSON from HTML
generateHTML(
  {
    type: 'doc',
    content: [{ type: 'paragraph', content: [{ type: 'text', text: 'On the browser only' }] }],
  },
  [
    Document,
    Paragraph,
    Text,
    Bold,
    // other extensions …
  ],
)
// `<p>On the browser only</p>`

/* ON SERVER OR BROWSER - See above for browser only compatible package (ships less JS) */
import { generateHTML } from '@tiptap/html'

// Generate JSON from HTML
generateHTML(
  {
    type: 'doc',
    content: [
      { type: 'paragraph', content: [{ type: 'text', text: 'On the server, or the browser' }] },
    ],
  },
  [
    Document,
    Paragraph,
    Text,
    Bold,
    // other extensions …
  ],
)
// `<p>On the server, or the browser</p>`

Caution

There are two exports available: generateHTML from @tiptap/core and from @tiptap/html. The former is only for use within the browser, the latter can be used on either the server or the browser. Make sure to use the correct one for your use case. On the server, a virtual DOM is used to generate the HTML. So using @tiptap/core can ship less code if you don't need the server-side functionality.

Generating JSON from HTML

Given an HTML string, the generateJSON function will return a JSON object representing the HTML content as a prosemirror document. The function takes two arguments: the HTML string and a list of extensions.

/* IN BROWSER ONLY - See below for server-side compatible package */
import { generateJSON } from '@tiptap/core'

// Generate JSON from HTML
generateJSON(`<p>On the browser only</p>`, [
  Document,
  Paragraph,
  Text,
  Bold,
  // other extensions …
])
// { type: 'doc', content: [{ type: 'paragraph', content: [{ type: 'text', text: 'On the browser only' }] }] }

/* ON SERVER OR BROWSER - See above for browser only compatible package (ships less JS) */
import { generateJSON } from '@tiptap/html'

// Generate JSON from HTML
generateJSON(`<p>On the server, or the browser</p>`, [
  Document,
  Paragraph,
  Text,
  Bold,
  // other extensions …
])
// { type: 'doc', content: [{ type: 'paragraph', content: [{ type: 'text', text: 'On the server, or the browser' }] }] }

Caution

There are two exports available: generateJSON from @tiptap/core and from @tiptap/html. The former is only for use within the browser, the latter can be used on either the server or the browser. Make sure to use the correct one for your use case. On the server, a virtual DOM is used to generate the HTML. So using @tiptap/core can ship less code if you don't need the server-side functionality.

Source code

packages/html/