Overview

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

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

• Block Types - Learn about different content blocks
• Formatting - Customize text and block formatting
• Customization - Build custom UI components
• Examples - See more advanced usage patterns

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