Theming & Styling ​

BlockNote allows you to change how the editor UI looks. You can change the theme of the default UI, or override its CSS styles.

Theming ​

If you want to make small adjustments to BlockNote's UI, you can create a custom theme, which will let you change colors, fonts, and border radii. You can do this by passing partial Theme objects to BlockNoteView.

Take a look at how this is done in the demo below:

If we pass both a light and dark theme to BlockNoteView, like in the demo, BlockNote automatically chooses which one to use based on the user's browser settings. However, you can just pass "light"/"dark" (for the light & dark default themes), or a single custom theme instead, if you want to use the same one regardless of browser settings.

Adding DOM Attributes ​

You can set additional HTML attributes on most DOM elements inside the editor, which let you change the way that blocks are styled.

In the demo below, we set a custom class on the blockContainer element to add a border to each block:

There are a number of elements that you can set classes for:

editor: The editor itself, excluding menus & toolbars.

blockContainer: The main container element for blocks. Contains both the block's content and its nested blocks.

blockGroup: The wrapper element for all top-level blocks in the editor and nested blocks.

blockContent: The wrapper element for a block's content.

inlineContent: The wrapper element for a block's rich-text content.

Advanced: Overriding CSS ​

If you want to change the editor's look even more, you can override CSS styles for both the editor, and all menus as well as toolbars. You do this by creating CSS objects for various components in the componentStyles field of your theme.

In the demo below, we use it to add some basic styling to the editor's default dark theme, and also make all hovered dropdown & menu items blue:

There are a number of components that you can override styles for:

ActionIcon: Generic component used for Side Menu items & Formatting Toolbar buttons.

Menu: Generic component used for the Slash Menu, Formatting Toolbar dropdowns, and color picker dropdown.

ColorIcon: Icon in the color picker dropdown (Formatting Toolbar & Drag Handle Menu).

DragHandleMenu: Component used for the Drag Handle Menu

EditHyperlinkMenu: Menu to edit hyperlinks, opened from the Formatting Toolbar or Hyperlink Toolbar.

Editor: The editor itself, excluding menus & toolbars.

Toolbar: Component used for the Formatting Toolbar and Hyperlink Toolbar.

Tooltip: Component for the tooltip that appears on hover, for Formatting Toolbar & Hyperlink Toolbar buttons.

SlashMenu: Component used for the Slash Menu.

SideMenu: Component used for the Side Menu.