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

Prop	Type	Default
`editor`	`BlockNoteEditor`	-
`theme?`	`"light" \| "dark"`	-
`editable?`	`boolean`	`true`
`onSelectionChange?`	`(() => void)`	-
`onChange?`	`(editor: BlockNoteEditor) => void`	-
`renderEditor?`	`boolean`	`true`
`children?`	`ReactNode`	-
`ref?`	`Ref<HTMLDivElement>`	-
`formattingToolbar?`	`boolean`	-
`linkToolbar?`	`boolean`	-
`slashMenu?`	`boolean`	-
`sideMenu?`	`boolean`	-
`filePanel?`	`boolean`	-
`tableHandles?`	`boolean`	-
`emojiPicker?`	`boolean`	-
`comments?`	`boolean`	-

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.