---
title: Serializing Markdown
toc: false
---

<ComponentPreview name="markdown-demo" />

<PackageInfo>

## Features

- Convert Markdown string to Slate JSON.
- Convert Slate JSON to Markdown string.

</PackageInfo>

## Installation

```bash
npm install @udecode/plate-markdown
```

## Usage

### Markdown to Slate

```tsx
import { MarkdownPlugin } from '@udecode/plate-markdown';

const editor = createPlateEditor({ 
  plugins: [
    // ...otherPlugins,
    MarkdownPlugin,
  ],
});

const value = editor.api.markdown.deserialize('**Hello world!**');
```

<ComponentPreview name="markdown-to-slate-demo" />

### Slate to Markdown

Currently supported plugins: paragraph, link, list, heading, italic, bold and code.

```tsx
const editor = createPlateEditor({ 
  value,
  plugins: [
    // ...otherPlugins,
    MarkdownPlugin,
  ],
});

const content = editor.api.markdown.serialize();
```

## Plugins

### MarkdownPlugin

<APIOptions>
<APIItem name="elementRules" type="RemarkElementRules">

Object where each key is a Markdown syntax element type and the value is a transformation function.

<APISubList>
<APISubListItem parent="elementRules" name="[key in MdastElementType]" type="RemarkElementRule">

The key corresponds to a Markdown element type (`paragraph`, `heading`, `list`, `listItem`, `link`, `image`, `blockquote`, `code`, `thematicBreak`). The value is an object specifying how to transform the given type of Markdown element into a Slate element.

<APISubList>
<APISubListItem parent="RemarkElementRule" name="transform" type="(node: MdastNode, options: RemarkPluginOptions<V>) => TElement | TElement[]">
A function that takes a `MdastNode` and `RemarkPluginOptions` as arguments and returns a `TElement` or an array of `TElement`.

</APISubListItem>
</APISubList>
</APISubListItem>
</APISubList>
</APIItem>
<APIItem name="textRules" type="RemarkTextRules">

Object where each key is a Markdown syntax text type and the value is an object providing optional mark and transform functions.

<APISubList>
<APISubListItem parent="textRules" name="[key in MdastTextType]" type="RemarkTextRule">

The key corresponds to a Markdown text type (`emphasis`, `strong`, `delete`, `inlineCode`, `html`, `text`). The value is an object specifying how to process the given type of Markdown text.

<APISubList>
<APISubListItem parent="RemarkTextRule" name="mark" type="(options: RemarkPluginOptions<V>) => string" optional>

An optional function that takes `RemarkPluginOptions` as argument and returns a string, indicating the mark type for the given Markdown text.

</APISubListItem>
<APISubListItem parent="RemarkTextRule" name="transform" type="(text: string) => string" optional>

An optional function that takes a string (the Markdown text) as argument and returns a transformed string.

</APISubListItem>
</APISubList>
</APISubListItem>
</APISubList>
</APIItem>
</APIOptions>

## API

### editor.api.markdown.deserialize

Converts a Markdown string to a Slate value.

<APIParameters>
<APIItem name="markdown" type="string">
The Markdown string to be deserialized.
</APIItem>
</APIParameters>

<APIReturns>
<APIItem type="TDescendant[]">
An array of Slate nodes representing the deserialized Markdown content.
</APIItem>
</APIReturns>

### editor.api.markdown.serialize

Converts the current Slate value to a Markdown string.

<APIParameters>
<APIItem name="options" type="object" optional>
<APISubList>
<APISubListItem parent="options" name="nodes" type="TDescendant[]" optional>
The Slate nodes to serialize. If not provided, the entire editor value will be used.
</APISubListItem>
</APISubList>
</APIItem>
</APIParameters>

<APIReturns>
<APIItem type="string">
A Markdown string representing the serialized Slate content.
</APIItem>
</APIReturns>