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;

useEditorFocus

The useEditorFocus hook returns a boolean and re-renders your component when the editor gains or loses focus. By default, it tracks the content area. Pass includeEditorUI: true to keep it true while focus moves into the editor's toolbars, menus, or popovers.

declare function useEditorFocus(
  options?: {
    /**
     * Include focus within the editor's toolbars, menus, and popovers.
     * Defaults to false.
     */
    includeEditorUI?: boolean;
  },
  editor?: BlockNoteEditor,
): boolean;

The options and editor arguments are optional. When called inside BlockNoteView, the hook can use the editor from context. To run a side effect on focus changes, subscribe to editor.onFocusChange.

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