BlockNoteBlockNote
    • Docs
    • AI
    • Examples
    • Pricing
    • Sign in

Getting Started

Introduction
Getting Started
Editor Setup

Foundations

Document StructureSchemasManipulating BlocksFormat Interoperability

Features

AI
Built-in Blocks
Collaboration
Import
Server-side processingLocalization (i18n)Extensions
Custom Schemas

React

Overview
UI Components
Styling & Theming
ThemesOverriding CSSAdding DOM Attributes

Editor Reference

OverviewManipulating ContentCursor & SelectionsYJS UtilitiesEventsPaste Handling
BlockNote DocsReactStyling & Theming

Styling & Theming

You can completely change the look and feel of the BlockNote editor. Change basic styling quickly with theme CSS variables, or apply more complex styles with additional CSS rules.

If you want to change, remove, or entirely replace the React components for menus & toolbars, see UI Components.

Themes

Themes let you quickly change the basic look of the editor UI, including colors, borders, shadows, and font.

Overriding CSS

You can change any styles applied to the editor by setting your own CSS styles.

Adding DOM Attributes

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

Suggestion Menus

Suggestion Menus appear when the user enters a trigger character, and text after the character is used to filter the menu items.

Themes

Themes let you quickly change the basic look of the editor UI, including colors, borders, shadows, and font.

On this page

Styling & Theming

Footer

BlockNoteBlockNote

BlockNote is an extensible React rich text editor with support for block-based editing, real-time collaboration, and comes with ready-to-use customizable UI components.

Learn

  • Documentation
  • Examples
  • Releases

Collaborate

  • Partner with us
  • Sponsorships
  • Contribute

Community

  • GitHub
  • Discord

Legal & Theme

  • Terms & Conditions
  • Privacy Policy

© 2026 BlockNote maintainers. All rights reserved.