Changing UI Elements ​

Along with the editor itself, BlockNote includes a few additional UI elements in the forms of menus and toolbars:

• Formatting Toolbar
• Hyperlink Toolbar
• Slash Menu
• Side Menu

By default, these are all included in the editor, but you can remove or replace each of them with your own React components.

Positioner Components ​

Each of the UI elements not only have to show and hide, but also show in the correct positions. This is handled using Positioner components. Each UI element has its own Positioner component, e.g. the Formatting Toolbar:

export const FormattingToolbarPositioner = (props: {
    editor: BlockNoteEditor<BSchema>;
    formattingToolbar?: FC<FormattingToolbarProps<BSchema>>;
}): JSX.Element => {
    ...
}

Removing UI Elements ​

In the following example, we remove the Side Menu from the editor. This is done by adding Positioner components for each UI element except the Side Menu:

Each further Positioner component you remove will remove its corresponding UI element from the editor. If you only want to keep the editor itself, add only an empty fragment (<></>) to BlockNoteView's children.

Replacing UI Elements ​

In the following example, the Side Menu is replaced with a simple component which just displays the name of the element:

As you can see, this is done by passing a React component to the sideMenu prop of SideMenuPositioner. Each Positioner element has a prop through which you can pass the component you want to render (formattingToolbar for the Formatting Toolbar, etc.). If nothing is passed, the Positioner will render the default UI element.