Overriding CSS

BlockNote provides several ways to customize the editor's appearance through CSS. You can override default styles using CSS classes and attributes.

Basic Example

In the demo below, we create additional CSS rules to make the editor text and hovered slash menu items blue:

GitHub

StackBlitz

import "@blocknote/core/fonts/inter.css";import { useCreateBlockNote } from "@blocknote/react";import { BlockNoteView } from "@blocknote/mantine";import "@blocknote/mantine/style.css";import "./styles.css";export default function App() {  // Creates a new editor instance.  const editor = useCreateBlockNote({    initialContent: [      {        type: "paragraph",        content: "Welcome to this demo!",      },      {        type: "paragraph",        content: "You'll see that the text is now blue",      },      {        type: "paragraph",        content:          "Press the '/' key - the hovered Slash Menu items are also blue",      },    ],  });  // Renders the editor instance using a React component.  // Adds `data-theming-css-demo` to restrict styles to only this demo.  return <BlockNoteView editor={editor} data-theming-css-demo />;}

/* Adds border and shadow to editor */.bn-root[data-theming-css-demo] .bn-editor * {  color: blue;}/* Makes slash menu hovered items blue */.bn-root[data-theming-css-demo] .bn-suggestion-menu-item[aria-selected="true"],.bn-root[data-theming-css-demo] .bn-suggestion-menu-item:hover {  background-color: blue;}

/// <reference types="vite-plus/client" />

CSS Selectors Reference

BlockNote CSS Classes

BlockNote uses classes with the bn- prefix to style editor elements. Here are the key classes you can target:

Editor Structure

.bn-root: Container class both the floating menus / toolbars and the editor
.bn-container: Container around .bn-editor
.bn-editor: Main editor element (the "contenteditable").
.bn-block: Individual block element (including nested).
.bn-block-group: Container for nested blocks.
.bn-block-content: Block content wrapper.
.bn-inline-content: Block's editable rich text content.

UI Components

.bn-toolbar: Formatting & link toolbars.
.bn-side-menu: Side menu element.
.bn-drag-handle-menu: Drag handle menu.
.bn-suggestion-menu: Suggestion menu.

Table Row & Column Dragging

.bn-table-handle: Row & column drag handles.
.bn-table-drag-source-row / .bn-table-drag-source-col: Every cell of the row/column being dragged.
.bn-table-drop-cursor: Bar marking the edge the row/column would be dropped at.
.bn-table-drag-preview: Snapshot of the row/column shown next to the cursor. Rendered outside the editor, so selectors scoped to .bn-editor won't match it.

BlockNote CSS Attributes

BlockNote uses data attributes to target specific block types and properties:

[data-content-type="blockType"]: Targets blocks of type blockType.
[data-propName="propValue"]: Targets blocks with specific prop values. If the value is the same as the default value, the data-propName attribute will not be added.

import "@blocknote/core/fonts/inter.css"; import { useCreateBlockNote } from "@blocknote/react"; import { BlockNoteView } from "@blocknote/mantine"; import "@blocknote/mantine/style.css"; import "./styles.css"; export default function App() { // Creates a new editor instance. const editor = useCreateBlockNote({ initialContent: [ { type: "paragraph", content: "Welcome to this demo!", }, { type: "paragraph", content: "You'll see that the text is now blue", }, { type: "paragraph", content: "Press the '/' key - the hovered Slash Menu items are also blue", }, ], }); // Renders the editor instance using a React component. // Adds `data-theming-css-demo` to restrict styles to only this demo. return <BlockNoteView editor={editor} data-theming-css-demo />; }

import "@blocknote/core/fonts/inter.css";import { useCreateBlockNote } from "@blocknote/react";import { BlockNoteView } from "@blocknote/mantine";import "@blocknote/mantine/style.css";import "./styles.css";export default function App() { // Creates a new editor instance. const editor = useCreateBlockNote({ initialContent: [ { type: "paragraph", content: "Welcome to this demo!", }, { type: "paragraph", content: "You'll see that the text is now blue", }, { type: "paragraph", content: "Press the '/' key - the hovered Slash Menu items are also blue", }, ], }); // Renders the editor instance using a React component. // Adds `data-theming-css-demo` to restrict styles to only this demo. return <BlockNoteView editor={editor} data-theming-css-demo />;}

/* Adds border and shadow to editor */ .bn-root[data-theming-css-demo] .bn-editor * { color: blue; } /* Makes slash menu hovered items blue */ .bn-root[data-theming-css-demo] .bn-suggestion-menu-item[aria-selected="true"], .bn-root[data-theming-css-demo] .bn-suggestion-menu-item:hover { background-color: blue; }

/* Adds border and shadow to editor */.bn-root[data-theming-css-demo] .bn-editor * { color: blue;}/* Makes slash menu hovered items blue */.bn-root[data-theming-css-demo] .bn-suggestion-menu-item[aria-selected="true"],.bn-root[data-theming-css-demo] .bn-suggestion-menu-item:hover { background-color: blue;}

Overriding CSS

Basic Example

CSS Selectors Reference

BlockNote CSS Classes

Editor Structure

UI Components

Table Row & Column Dragging

BlockNote CSS Attributes

On this page

Learn

Collaborate

Community

Legal & Theme