HTML

It's possible to import HTML content into BlockNote blocks, completely client-side.

The functions to import from HTML are considered "lossy"; some information might be dropped when converting HTML 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).

HTML to Blocks

Use tryParseHTMLToBlocks to parse an HTML string to Block objects:

async tryParseHTMLToBlocks(html: string): Promise<Blocks[]>;

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

returns: The blocks parsed from the HTML string.

Tries to create Block objects out of any HTML block-level elements, and InlineContent 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

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 initialHTML = "<p>Hello, <strong>world!</strong></p>";

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

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

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

  // Renders a text area for you to write/paste HTML in, and the editor instance
  // below, which displays the current HTML as blocks.
  return (
    <div className={"wrapper"}>
      <div>Input (HTML):</div>
      <div className={"item bordered"}>
        <code>
          <textarea defaultValue={initialHTML} onChange={htmlInputChanged} />
        </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%;
}

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 initialHTML = "<p>Hello, <strong>world!</strong></p>"; export default function App() { // Creates a new editor instance. const editor = useCreateBlockNote(); const htmlInputChanged = useCallback( async (e: ChangeEvent<HTMLTextAreaElement>) => { // Whenever the current HTML content changes, converts it to an array of // Block objects and replaces the editor's content with them. const blocks = await editor.tryParseHTMLToBlocks(e.target.value); editor.replaceBlocks(editor.document, blocks); }, [editor], ); // For initialization; on mount, convert the initial HTML to blocks and replace the default editor's content useEffect(() => { async function loadInitialHTML() { const blocks = await editor.tryParseHTMLToBlocks(initialHTML); editor.replaceBlocks(editor.document, blocks); } loadInitialHTML(); }, [editor]); // Renders a text area for you to write/paste HTML in, and the editor instance // below, which displays the current HTML as blocks. return ( <div className={"wrapper"}> <div>Input (HTML):</div> <div className={"item bordered"}> <code> <textarea defaultValue={initialHTML} onChange={htmlInputChanged} /> </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%; }

HTML

HTML to Blocks

On this page

Learn

Collaborate

Community

Legal

Theme