HTML to Tiptap JSON Converter

How to convert HTML to Tiptap JSON

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

Why does my HTML change in Tiptap?

Tiptap doesn't keep raw HTML. It parses your markup against a schema made from the extensions you register. Tags the schema knows become nodes and marks, and everything else is dropped or turned into plain paragraphs.

That is why div wrappers disappear, classes are removed, and inline styles vanish unless an extension like TextStyle, Color, or TextAlign is registered to read them. Paste your HTML here to see exactly what survives.

Migrating stored HTML to JSON

If your database stores editor content as HTML, moving to JSON makes it easier to query, transform, and render custom nodes. The migration is a loop: load each record with editor.commands.setContent(html), read editor.getJSON(), and save the result.

On the server, use generateJSON from @tiptap/html with the same extensions as your editor. Using the same extension list on both sides is what keeps the output identical.

Reading the output

• Every document starts with a doc node and a content array.
• Block nodes like paragraph, heading, bulletList, and table hold other nodes in content.
• Attributes such as a heading level or an image src live in attrs.
• Text nodes carry formatting in a marks array, for example bold, italic, or a link with an href.

Convert HTML to Tiptap JSON in your own code

This tool is a headless Tiptap editor, so the same conversion takes a few lines in your app. See the serialization format 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(html);
const json = editor.getJSON();