Markdown to Tiptap JSON Converter

How to convert Markdown to Tiptap JSON

1. 1Paste your Markdown 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.

Understanding the JSON structure

• The root is always a doc node with a content array.
• A heading is a node with attrs.level, and a paragraph holds text nodes.
• Lists nest: bulletList contains listItem, which contains a paragraph.
• Formatting lives on text nodes as marks, for example bold, italic, code, or a link with attrs.href.

When to store JSON instead of Markdown

JSON keeps everything the editor knows, such as mention ids, image sizes, and table structure. It loads into Tiptap without parsing and is easy to walk in code, which helps with search indexing, sending notifications for mentions, or migrating content with a script.

Markdown is better when people edit files by hand or keep content in git. Many apps store JSON and export Markdown when a user asks for it.

Seeding an editor with the output

Pass the JSON as the content option of useEditor, or to editor.commands.setContent(json). It also works well as fixture data for tests and Storybook stories.

Every node in the JSON must have a matching extension in your editor. This tool uses StarterKit plus images, tables, and task lists, so register those if your content uses them.

Convert Markdown 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";
import { Markdown } from "@tiptap/markdown";

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

editor.commands.setContent(markdown, { contentType: "markdown" });
const json = editor.getJSON();