Using BlockNote With React

BlockNote provides a powerful React integration that makes it easy to add rich text editing capabilities to your applications. The React bindings offer a declarative API that integrates seamlessly with React's component model and state management patterns.

Key Components

The React integration centers around two main pieces:

• useCreateBlockNote - A React hook that creates and manages editor instances
• BlockNoteView - A component that renders the editor with a complete UI

Quick Start

Here's a minimal example of how to integrate BlockNote into a React component:

import React from "react"; import { useCreateBlockNote } from "@blocknote/react"; import { BlockNoteView } from "@blocknote/mantine"; // Or, you can use ariakit, shadcn, etc.  function MyEditor() {  const editor = useCreateBlockNote();   return <BlockNoteView editor={editor} />; }

This gives you a fully functional editor with:

• Text editing and formatting
• Block types (paragraphs, headings, lists, etc.)
• Toolbar for formatting options
• Side menu for block operations

BlockNoteView

The <BlockNoteView> component is used to render the editor. It also provides a number of props for editor specific events.

Props

Hooks

useCreateBlockNote

The useCreateBlockNote hook is used to create a new BlockNoteEditor instance.

declare function useCreateBlockNote(  options?: BlockNoteEditorOptions,  deps?: React.DependencyList, ): BlockNoteEditor;

useEditorChange

The useEditorChange hook is used to listen for changes to the editor.

declare function useEditorChange(  callback: (  editor: BlockNoteEditor,  ctx: {  /**  * Returns the blocks that were inserted, updated, or deleted by the change that occurred.  */  getChanges(): BlocksChanged;  },  ) => void,  editor?: BlockNoteEditor, ): BlockNoteEditor;

useEditorSelectionChange

The useEditorSelectionChange hook is used to listen for changes to the editor selection.

declare function useEditorSelectionChange(  /**  * Callback that runs when the editor's selection changes.  */  callback: () => void,  editor?: BlockNoteEditor, ): BlockNoteEditor;

Next Steps

The editor is now ready to use! Start typing and explore the various block types and formatting options available in the toolbar.

Now that you have a basic editor working, you can explore:

• Built-in Block Types - Learn about what types of content the BlockNote editor supports by default
• Styling & Theming - Customize how the editor looks and feels
• Custom UI Elements - Replace the default UI components to really personalize your editor
• Custom Schemas - Expand the types of content that users can add to the editor
• Examples - Browse a library of examples created by the BlockNote maintainers and community members