remirror/remirror

---
hide_title: true
title: MarkdownExtension
---

# `MarkdownExtension`

## Summary

This extension transforms the **ProseMirror** content of your editor to markdown syntax. It also transforms markdown syntax into a **ProseMirror** document.

## Features

### Reduced Storage

Markdown can be used to reduce the storage needed for your documents. It takes less space than a JSON object describing the same editor content.

The following example shows a hook which can be used to automatically persist content as markdown.

```ts
import delay from 'delay';
import { useCallback, useState } from 'react';
import { useHelpers, useKeymap } from '@remirror/react';

async function saveContent(content: string) {
  // Fake API call
  await delay(1000);
}

interface UseSaveHook {
  saving: boolean;
  error: Error | undefined;
}

// Create a hook which saves the content as markdown whenever `Ctrl-s` on Mac `Cmd-s` is pressed.
function useSaveHook() {
  const helpers = useHelpers();
  const [state, setState] = useState<UseSaveHook>({ saving: false, error: undefined });

  useKeymap(
    'Mod-s',
    useCallback(() => {
      // Convert the editor content to markdown.
      const markdown = helpers.getMarkdown();

      setState({ saving: true, error: undefined });

      saveContent(markdown)
        .then(() => {
          setState({ saving: false, error: undefined });
        })
        .catch((error) => {
          setState({ saving: true, error });
        });

      return true;
    }, [helpers]),
  );

  return state;
}
```

### Transform existing Markdown

If you already have a lot of markdown content this can be used to transform the markdown content into a ProseMirror `doc` node for your editor.

- The entire document can be set with a markdown string.
- Insert any markdown content into the document at any insertion point.

## Usage

### Installation

This extension is installed for you when you install the main `remirror` package.

You can use the imports in the following way:

```ts
import { MarkdownExtension, MarkdownOptions } from 'remirror/extensions';
```

The extension is provided by the `@remirror/extension-markdown` package.

### Examples

See [storybook](https://remirror.vercel.app/?path=/story/editors-markdown--basic) for examples.

## API

- [MarkdownExtension](../api/extension-markdown)