Customizing the Editor ​

While you can get started with BlockNote in minutes, it's likely that you'll want to customize its features and functionality to better suit your app.

Editor Options ​

There are a number of options that you can pass to useBlockNote(), which you can use to customize the editor. You can find the full list of these below:

export type BlockNoteEditorOptions = Partial<{
  editable: boolean;
  initialContent: PartialBlock[];
  editorDOMAttributes: Record<string, string>;
  onEditorReady: (editor: BlockNoteEditor) => void;
  onEditorContentChange: (editor: BlockNoteEditor) => void;
  onTextCursorPositionChange: (editor: BlockNoteEditor) => void;
  slashMenuItems: ReactSlashMenuItem[];
  customElements: CustomElements;
  uiFactories: UiFactories;
  defaultStyles: boolean;
  theme: "light" | "dark";
}>;

editable: Locks the editor from being editable by the user if set to false. Editor Functions will still work.

initialContent: The content that should be in the editor when it's created, represented as an array of partial block objects.

editorDOMAttributes: An object containing attributes that should be added to the editor's HTML element. For example, you can pass { class: "my-editor-class" } to set a custom class name.

onEditorReady: A callback function that runs when the editor is ready to be used.

onEditorContentChange: A callback function that runs whenever the editor's contents change.

onTextCursorPositionChange: A callback function that runs whenever the text cursor position changes. Head to Text Cursor to see how you can make use of this.

slashMenuItems: The commands that are listed in the editor's Slash Menu. If this option isn't defined, a default list of commands is loaded.

customElements: React components for a custom Formatting Toolbar and/or Drag Handle Menu to use.

uiFactories: UI element factories for creating a custom UI, including custom positioning & rendering. You can find out more about UI factories in Creating Your Own UI Elements.

defaultStyles: Whether to use the default font and reset the styles of <p>, <li>, <h1>, etc. elements that are used in BlockNote. Defaults to true if undefined.

theme: Whether to use the light or dark theme.

Demo: Saving & Restoring Editor Contents ​

By default, BlockNote doesn't preserve the editor contents when your app is reopened or refreshed. However, using the editor options, you can change this by using the editor options.

In the example below, we use the onEditorContentChange option to save the editor contents in local storage whenever they change, then pass them to initialContent whenever the page is reloaded.