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: Themed root for the editor or portalled UI. An editor can have multiple roots.
.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.

Menus and popovers may be portalled outside the toolbar or button that opened them. Target their own classes under .bn-root rather than relying on a toolbar or .bn-container ancestor. See Configuring Portal Targets.

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

BlockNote CSS Attributes

On this page

Learn

Collaborate

Community

Legal & Theme