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