Docs
UI Components

Changing UI Elements

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

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

User stories:

As a developer, I want to:

  • Removing ui elements
  • changing the appearance / styling of some components
  • changing the appearance / styling of the editor itself
  • Adding a button to Menu X
  • Removing a button from Menu X
  • Adding items to Menu X
  • Reordering items in Menu X
  • Changing Formatting toolbar dropdown
  • Creating their own suggestions menu
  • Replace Menu X with my own component that uses my own UI library
  • I want to create a sticky formatting toolbar

Menu X =

  • Formatting Toolbar
  • Hyperlink Toolbar
  • Slash Menu
  • Side Menu
  • Drag Handle menu
  • Image Toolbar
Adding DOM AttributesBlock Side Menu