Export Markdown from your editor

Available in Start planBetav0.2.0

Use Tiptap's @tiptap-pro/extension-export-markdown to export your editor's content as a .md file. This extension converts your editor content to Markdown locally using the @tiptap/markdown extension — no API calls or credentials are required.

You can also use the REST API instead if you'd prefer to handle the conversion on your server.

Install the Markdown Export extension

The Conversion extensions are published in Tiptap's private npm registry. Integrate the extensions by following the private registry guide.

Once done you can install and import the Export Markdown extension package.

npm i @tiptap-pro/extension-export-markdown

Required peer dependency

This extension requires the @tiptap/markdown extension to be installed and configured in your editor. The @tiptap/markdown extension provides the serialization logic used to convert editor content to Markdown.

npm i @tiptap/markdown

import { ExportMarkdown } from '@tiptap-pro/extension-export-markdown'

Configuring the extension

The ExportMarkdown extension can be configured with an ExportMarkdownOptions (object) as an argument to the configure method with the following properties:

import { Markdown } from '@tiptap/markdown'
import { ExportMarkdown } from '@tiptap-pro/extension-export-markdown'

const editor = new Editor({
  extensions: [
    // Other extensions ...
    Markdown,
    ExportMarkdown.configure({
      onCompleteExport: (result) => {
        // Handle the exported Markdown string
      },
    }),
    // Other extensions ...
  ],
})

Parameter	Type	Description	Default
`onCompleteExport`	`(result: string) => void`	Callback that receives the exported Markdown content as a string	Throws error if not provided

Export a Markdown file

With the extension installed, you can export your editor's content to .md using the exportMarkdown command.

/**
 * Export the current document as a Markdown string.
 *
 * Requires the @tiptap/markdown extension to be installed and
 * configured in the editor for serialization to work.
 *
 * @param options.onCompleteExport - Optional callback to override the extension-level handler
 * @example editor.commands.exportMarkdown({ onCompleteExport: (markdown) => console.log(markdown) })
 */
exportMarkdown: (options?: ExportMarkdownCommandOptions) => ReturnType

The ExportMarkdownCommandOptions interface:

Property	Type	Description
`onCompleteExport`	`(result: string) => void`	Optional per-invocation callback that overrides the extension-level `onCompleteExport`

import { Markdown } from '@tiptap/markdown'
import { ExportMarkdown } from '@tiptap-pro/extension-export-markdown'

const editor = new Editor({
  extensions: [
    // Other extensions ...
    Markdown,
    ExportMarkdown.configure({
      onCompleteExport(result) {
        // Download the Markdown file
        const blob = new Blob([result], { type: 'text/markdown' })
        const url = URL.createObjectURL(blob)
        const a = document.createElement('a')

        a.href = url
        a.download = 'document.md'
        a.click()

        URL.revokeObjectURL(url)
      },
    }),
    // Other extensions ...
  ],
})

// Use the extension-level callback
editor.chain().exportMarkdown().run()

// Or override the callback for a specific export
editor.chain().exportMarkdown({
  onCompleteExport(result) {
    // Custom handling, e.g. copy to clipboard
    navigator.clipboard.writeText(result)
  },
}).run()

How it works

When you call exportMarkdown, the extension uses the @tiptap/markdown extension's getMarkdown() method to serialize the editor's content locally. No data is sent to any external service. The onCompleteExport callback receives the Markdown string directly, which you can then download as a .md file, copy to clipboard, or process as needed.

PreviouslyREST API

Next upREST API