HTML

The functions to export to HTML are considered "lossy"; some information might be dropped when you export Blocks to HTML.

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

Export to BlockNote HTML

Use editor.blocksToFullHTML to export the entire document with all structure, styles and formatting. The exported HTML is the same as BlockNote would use to render the editor, and includes all structure for nested blocks.

For example, you an use this for static rendering documents that have been created in the editor. Make sure to include the same stylesheets when you want to render the output HTML (see example).

async blocksToFullHTML(blocks?: Block[]): Promise<string>;

// Usage
const HTMLFromBlocks = await editor.blocksToFullHTML(blocks);

blocks: The blocks to convert. If not provided, the entire document (all top-level blocks) is used.

returns: The blocks, exported to an HTML string.

Export to Interoperable HTML

The editor exposes functions to convert Blocks to and from HTML for interoperability with other applications.

Converting Blocks to HTML this way will lose some information such as the nesting of nodes in order to export a simple HTML structure.

Use blocksToHTMLLossy to export Block objects to an HTML string:

async blocksToHTMLLossy(blocks?: Block[]): Promise<string>;

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

blocks: The blocks to convert. If not provided, the entire document (all top-level blocks) is used.

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

GitHub

StackBlitz

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

import "./styles.css";

export default function App() {
  // Stores the editor's contents as HTML.
  const [html, setHTML] = useState<string>("");

  // Creates a new editor instance with some initial content.
  const editor = useCreateBlockNote({
    initialContent: [
      {
        type: "paragraph",
        content: [
          "Hello, ",
          {
            type: "text",
            text: "world!",
            styles: {
              bold: true,
            },
          },
        ],
      },
    ],
  });

  const onChange = async () => {
    // Converts the editor's contents from Block objects to HTML and store to state.
    const html = await editor.blocksToHTMLLossy(editor.document);
    setHTML(html);
  };

  useEffect(() => {
    // on mount, trigger initial conversion of the initial content to html
    onChange();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // Renders the editor instance, and its contents as HTML below.
  return (
    <div className="wrapper">
      <div>Input (BlockNote Editor):</div>
      <div className="item">
        <BlockNoteView editor={editor} onChange={onChange} />
      </div>
      <div>Output (HTML):</div>
      <div className="item bordered">
        <pre>
          <code>{html}</code>
        </pre>
      </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 pre {
  border-radius: 0.5rem;
  height: 100%;
  overflow: auto;
  padding-block: 1rem;
  padding-inline: 54px;
  width: 100%;
  white-space: pre-wrap;
}

HTML

Export to BlockNote HTML

Export to Interoperable HTML

On this page

Learn

Collaborate

Community

Legal

Theme