---
title: "Install and Setup the Markdown Package"
description: "Learn how to install and use the Markdown package in Tiptap to enable Markdown support in your editor."
canonical_url: "https://tiptap.dev/docs/editor/markdown/getting-started/installation"
---

# Install and Setup the Markdown Package

Learn how to install and use the Markdown package in Tiptap to enable Markdown support in your editor.

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:

```bash
npm install @tiptap/markdown
```

## Basic Setup

Add the Markdown extension to your editor:

```typescript
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:

```typescript
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:

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

**Examples:**

```typescript
// 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:

```typescript
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:

```typescript
Markdown.configure({
  markedOptions: {
    gfm: true, // GitHub Flavored Markdown
    breaks: false, // Convert \n to <br>
    pedantic: false, // Strict Markdown mode
  },
})
```

See the [marked documentation](https://marked.js.org/using_advanced#options) for all available options.

## Verifying Installation

To verify the extension is installed correctly:

```typescript
// 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

```json
{
  "compilerOptions": {
    "moduleResolution": "node",
    "esModuleInterop": true
  }
}
```