ExamplesBasicMulti-Editor Setup

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>  );}