Markdown

The functions to import from Markdown are considered "lossy"; some information might be dropped when converting Markdown to Blocks.

To serialize Blocks to a non-lossy format (for example, to store the contents of the editor in your backend), simply export the built-in Block format using JSON.stringify(editor.document).

BlockNote can import Markdown content into Block objects. Note that this is considered "lossy", as not all Markdown structures can be entirely represented as BlockNote blocks.

Markdown to Blocks

Use tryParseMarkdownToBlocks to try parsing a Markdown string into Block objects:

async tryParseMarkdownToBlocks(markdown: string): Promise<Blocks[]>;

// Usage
const blocksFromMarkdown = await editor.tryParseMarkdownToBlocks(markdown);

returns: The blocks parsed from the Markdown string.

Tries to create Block and InlineContent objects based on Markdown syntax, though not all symbols are recognized. If BlockNote doesn't recognize a symbol, it will parse it as text.

Demo

GitHub

StackBlitz

import "@blocknote/core/fonts/inter.css";
import { useCreateBlockNote } from "@blocknote/react";
import { BlockNoteView } from "@blocknote/mantine";
import "@blocknote/mantine/style.css";
import { ChangeEvent, useCallback, useEffect } from "react";

import "./styles.css";

const initialMarkdown = "Hello, **world!**";

export default function App() {
  // Creates a new editor instance.
  const editor = useCreateBlockNote();

  const markdownInputChanged = useCallback(
    async (e: ChangeEvent<HTMLTextAreaElement>) => {
      // Whenever the current Markdown content changes, converts it to an array of
      // Block objects and replaces the editor's content with them.
      const blocks = await editor.tryParseMarkdownToBlocks(e.target.value);
      editor.replaceBlocks(editor.document, blocks);
    },
    [editor],
  );

  // For initialization; on mount, convert the initial Markdown to blocks and replace the default editor's content
  useEffect(() => {
    async function loadInitialHTML() {
      const blocks = await editor.tryParseMarkdownToBlocks(initialMarkdown);
      editor.replaceBlocks(editor.document, blocks);
    }
    loadInitialHTML();
  }, [editor]);

  // Renders a text area for you to write/paste Markdown in, and the editor instance
  // below, which displays the current Markdown as blocks.
  return (
    <div className={"wrapper"}>
      <div>Input (Markdown):</div>
      <div className={"item bordered"}>
        <code>
          <textarea
            defaultValue={initialMarkdown}
            onChange={markdownInputChanged}
          />
        </code>
      </div>
      <div>Output (BlockNote Editor):</div>
      <div className={"item"}>
        <BlockNoteView editor={editor} editable={false} />
      </div>
    </div>
  );
}

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.item {
  border-radius: 0.5rem;
  flex: 1;
  overflow: hidden;
}

.item.bordered {
  border: 1px solid gray;
}

.item textarea {
  background-color: transparent;
  border-radius: 0.5rem;
  height: 100%;
  overflow: auto;
  padding-block: 1rem;
  padding-inline: 54px;
  resize: none;
  width: 100%;
}

Markdown

Markdown to Blocks

On this page

Learn

Collaborate

Community

Legal

Theme