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[];
  defaultStyles: boolean;
  uploadFile: (file: File) => Promise<string>
}>;

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.

domAttributes: An object containing HTML attributes that should be added to various DOM elements in the editor. See Adding DOM Attributes for more.

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.

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.

uploadFile: A function which handles file uploads and eventually returns the URL to the uploaded file. Used by the Image Toolbar.