Multi-Editor Setup
This example showcases use of multiple editors in a single page - you can even drag blocks between them.
Relevant Docs:
import { PartialBlock } from "@blocknote/core";import "@blocknote/core/fonts/inter.css";import { BlockNoteView } from "@blocknote/mantine";import "@blocknote/mantine/style.css";import { useCreateBlockNote } from "@blocknote/react";// Component that creates & renders a BlockNote editor.function Editor(props: { initialContent?: PartialBlock[] }) { // Creates a new editor instance. const editor = useCreateBlockNote({ initialContent: props.initialContent, }); // Renders the editor instance using a React component. return <BlockNoteView editor={editor} style={{ flex: 1 }} />;}export default function App() { // Creates & renders two editors side by side. return ( <div style={{ display: "flex" }}> <Editor initialContent={[ { type: "paragraph", content: "Welcome to this demo!", }, { type: "paragraph", content: "This is a block in the first editor", }, { type: "paragraph", }, ]} /> <Editor initialContent={[ { type: "paragraph", content: "This is a block in the second editor", }, { type: "paragraph", content: "Try dragging blocks from one editor to the other", }, { type: "paragraph", }, ]} /> </div> );}