---
title: "HTML Utility"
description: "Use the HTML Utility in Tiptap to render JSON as HTML and convert HTML to JSON without an editor instance. More in the docs!"
canonical_url: "https://tiptap.dev/docs/editor/api/utilities/html"
---

# HTML Utility

Use the HTML Utility in Tiptap to render JSON as HTML and convert HTML to JSON without an editor instance. More in the docs!

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.

```js
/* 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.

> **Interactive demo:** [GenerateHTML](https://embed.tiptap.dev/preview/GuideContent/GenerateHTML)

## 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.

```js
/* 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.

> **Interactive demo:** [GenerateJSON](https://embed.tiptap.dev/preview/GuideContent/GenerateJSON)

## Source code

[packages/html/](https://github.com/ueberdosis/tiptap/blob/main/packages/html/)