UI Components

BlockNote includes a number of UI Components (like menus and toolbars) that can be completely customized:

• Block Side Menu
• Formatting Toolbar
• Suggestion Menus

Configuring Portal Targets

By default, all floating UI elements (toolbars, menus, table handles, etc.) portal into the editor's bn-container so they stay scoped to the editor. If your layout needs them to escape — e.g. an overflow: hidden ancestor that would clip large dropdowns, or a host modal with its own stacking context — pass a portalElements prop to BlockNoteView:

<BlockNoteView
  editor={editor}
  portalElements={{
    // Global default for any element not listed below.
    default: document.body,
    // Per-element overrides. Values can be an HTMLElement or a CSS selector.
    tableHandles: ".bn-container",
  }}
/>

Keys mirror the default UI flags (formattingToolbar, linkToolbar, slashMenu, emojiPicker, sideMenu, filePanel, tableHandles, comments). Manually-mounted Controllers also accept a portalElement prop that takes precedence over the map. All keys, including default, update reactively. See the Portal Targets example.

When a target sits outside the editor's DOM (like document.body), BlockNote automatically renders a themed wrapper element inside it, so floating UI keeps the editor's styling and theming wherever it's portalled.