HTML Utility
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 HTML from JSON
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 HTML from JSON
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.