Tiptap JSON to HTML Converter

How to convert Tiptap JSON to HTML

1. 1Paste your Tiptap JSON into the input panel, or upload a file.
2. 2The HTML output updates as you type.
3. 3Open the Preview tab to check how the content renders.
4. 4Copy the result with the copy button.

Inspect what's in your database

Tiptap JSON is hard to read once it's a few levels deep. Paste a stored document here to see it rendered, and spot problems like empty paragraphs, stray marks, or broken links without starting your app.

Rendering Tiptap JSON in production

• generateHTML from @tiptap/html turns JSON into an HTML string on the server.
• The editorcn Static Renderer renders JSON or HTML as styled React and lets you map custom nodes to your own components.
• A read-only Tiptap editor works too, but it ships the whole editor to the browser just to show content.

Common errors

• Invalid JSON content: the document uses a node or mark that isn't registered, or a node is missing required content.
• A JSON syntax error: the text itself is malformed, often because of a trailing comma or a missing quote.

Convert Tiptap JSON to HTML in your own code

This tool is a headless Tiptap editor, so the same conversion takes a few lines in your app. See the Static Renderer docs for details.

import { Editor } from "@tiptap/core";
import { StarterKit } from "@tiptap/starter-kit";

const editor = new Editor({
  element: null,
  extensions: [StarterKit],
});

editor.commands.setContent(json);
const html = editor.getHTML();