Tiptap Docs

Install and Setup the Markdown Package

Beta

This guide will walk you through installing and setting up the Markdown extension in your Tiptap editor.

Installation

Install the Markdown extension using your preferred package manager:

npm install @tiptap/markdown

Basic Setup

Add the Markdown extension to your editor:

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
import { Markdown } from '@tiptap/markdown'

const editor = new Editor({
  element: document.querySelector('#editor'),
  extensions: [StarterKit, Markdown],
  content: '<p>Hello World!</p>',
})

That's it! Your editor now supports Markdown parsing and serialization.

Initial Content as Markdown

To load Markdown content when creating the editor:

const editor = new Editor({
  extensions: [StarterKit, Markdown],
  content: '# Hello World\n\nThis is **Markdown**!',
  contentType: 'markdown',
})

Configuration Options

The Markdown extension accepts several configuration options:

Indentation Style

Configure how nested structures (lists, code blocks) are indented in the serialized Markdown:

Markdown.configure({
  indentation: {
    style: 'space', // 'space' or 'tab'
    size: 2, // Number of spaces or tabs
  },
})

Examples:

// Use 4 spaces for indentation (default: 2 spaces)
Markdown.configure({
  indentation: { style: 'space', size: 4 },
})

// Use tabs for indentation
Markdown.configure({
  indentation: { style: 'tab', size: 1 },
})

Custom Marked Instance

If you need to use a custom version of marked or pre-configure it:

import { marked } from 'marked'

// Configure marked
marked.setOptions({
  gfm: true,
  breaks: true,
})

// Use custom marked instance
Markdown.configure({
  marked: marked,
})

Marked Options

You can also pass marked options directly to the extension:

Markdown.configure({
  markedOptions: {
    gfm: true, // GitHub Flavored Markdown
    breaks: false, // Convert \n to <br>
    pedantic: false, // Strict Markdown mode
    smartypants: false, // Smart quotes and dashes
  },
})

See the marked documentation for all available options.

Verifying Installation

To verify the extension is installed correctly:

// Check if Markdown manager is available
console.log(editor.markdown) // Should log the MarkdownManager instance

// Try parsing
const json = editor.markdown.parse('# Hello')
console.log(json)
// { type: 'doc', content: [...] }

// Try serializing
const markdown = editor.markdown.serialize(json)
console.log(markdown)
// # Hello

Common Issues

Extension Not Found

If you get an error that @tiptap/markdown cannot be found:

  1. Make sure it's installed: npm list @tiptap/markdown
  2. Clear your build cache and node_modules
  3. Reinstall dependencies

Markdown Not Parsing

If Markdown isn't being parsed:

  1. Make sure you're using contentType: 'markdown' when setting initial content
  2. Or use the contentType: 'markdown' option when calling setContent()

TypeScript Errors

If you get TypeScript errors:

  1. Make sure @tiptap/core is installed (it includes type definitions)
  2. Update to the latest version of both packages
  3. Check your tsconfig.json includes the correct module resolution
{
  "compilerOptions": {
    "moduleResolution": "node",
    "esModuleInterop": true
  }
}
PreviouslyGetting Started