ExamplesBasicDisplaying Document JSON

Displaying Document JSON

In this example, the document's JSON representation is displayed below the editor.

Try it out: Try typing in the editor and see the JSON update!

Relevant Docs:

GitHub
StackBlitz
import { Block } from "@blocknote/core";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 document JSON.  const [blocks, setBlocks] = useState<Block[]>([]);  // Creates a new editor instance.  const editor = useCreateBlockNote({    initialContent: [      {        type: "paragraph",        content: "Welcome to this demo!",      },      {        type: "heading",        content: "This is a heading block",      },      {        type: "paragraph",        content: "This is a paragraph block",      },      {        type: "paragraph",      },    ],  });  // Sets the initial document JSON  useEffect(() => setBlocks(editor.document), []);  // Renders the editor instance and its document JSON.  return (    <div className={"wrapper"}>      <div>BlockNote Editor:</div>      <div className={"item"}>        <BlockNoteView          editor={editor}          onChange={() => {            // Sets the document JSON whenever the editor content changes.            setBlocks(editor.document);          }}        />      </div>      <div>Document JSON:</div>      <div className={"item bordered"}>        <pre>          <code>{JSON.stringify(blocks, null, 2)}</code>        </pre>      </div>    </div>  );}