Examples
Basic
Basic Setup

Basic Setup

This example shows the minimal code required to set up a BlockNote editor in React.

Relevant Docs:

import "@blocknote/core/fonts/inter.css";
import { useCreateBlockNote, BlockNoteDefaultUI } from "@blocknote/ai";
import "@blocknote/mantine/style.css";
import { BlockNoteView } from "@blocknote/mantine";
 
export default function App() {
  // Creates a new editor instance.
  const editor = useCreateBlockNote();
 
  // Renders the editor instance using a React component.
  return (
    <BlockNoteView
      editor={editor}
      formattingToolbar={false}
      linkToolbar={false}
      slashMenu={false}
      sideMenu={false}
      filePanel={false}
      tableHandles={false}
      emojiPicker={false}>
      <BlockNoteDefaultUI />
    </BlockNoteView>
  );
}