Appearance

On this page

Markdown & HTML ​

It's possible to export or import Blocks to and from Markdown and HTML.

WARNING

The functions to import/export to and from Markdown/HTML are considered "lossy"; some information might be dropped when you export Blocks to those formats.

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.topLevelBlocks).

Markdown ​

BlockNote can import / export Blocks to and from Markdown. Note that this is also considered "lossy", as not all structures can be entirely represented in Markdown.

Converting Blocks to Markdown ​

Block objects can be serialized to a Markdown string using the following function:

typescript
// Definition
class BlockNoteEditor {
...
  public blocksToMarkdownLossy(blocks: Block[]): string;
...
}

// Usage
const markdownFromBlocks = editor.blocksToMarkdownLossy(blocks);

returns: The blocks, serialized as a Markdown string.

The output is simplified as Markdown does not support all features of BlockNote - children of blocks which aren't list items are un-nested and certain styles are removed.

Demo

Parsing Markdown to Blocks ​

Block objects can be parsed from a Markdown string using the following function:

typescript
// Definition
class BlockNoteEditor {
...
  public tryParseMarkdownToBlocks(markdown: string): Blocks[];
...
}

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

returns: The blocks parsed from the Markdown string.

Tries to create Block and InlineNode 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

HTML ​

We expose functions to convert Blocks to and from HTML. Converting Blocks to HTML will lose some information such as the nesting of nodes in order to export a simple HTML structure.

Converting Blocks to HTML ​

Block objects can be exported to an HTML string using the following function:

typescript
// Definition
class BlockNoteEditor {
...
  public blocksToHTMLLossy(blocks: Block[]): string;
...
}

// Usage
const HTMLFromBlocks = editor.blocksToHTMLLossy(blocks);

returns: The blocks, exported to an HTML string.

To better conform to HTML standards, children of blocks which aren't list items are un-nested in the output HTML.

Demo

Parsing HTML to Blocks ​

Block objects can be parsed from an HTML string using the following function:

typescript
// Definition
class BlockNoteEditor {
...
  public tryParseHTMLToBlocks(html: string): Blocks[];
...
}

// Usage
const blocksFromHTML = editor.tryParseHTMLToBlocks(html);

returns: The blocks parsed from the HTML string.

Tries to create Block objects out of any HTML block-level elements, and InlineNode objects from any HTML inline elements, though not all HTML tags are recognized. If BlockNote doesn't recognize an element's tag, it will parse it as a paragraph or plain text.

Demo