Skip to content
On this page

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.