BlockNote
DocsDocsExamplesExamplesPricingPricingAboutAbout
GitHubGitHubDiscordDiscord
  • Introduction
  • Quickstart
  • Editor Basics
    • Editor Setup
    • Document Structure
    • Default Schema
  • Editor API
    • Manipulating Blocks
    • Manipulating Inline Content
    • Cursor & Selections
    • Markdown & HTML
    • Server-side processing
    • Export to PDF
    • Export to docx (Office Open XML)
  • Styling & Theming
    • Themes
    • Overriding CSS
    • Adding DOM Attributes
  • UI Components
    • Block Side Menu
    • Formatting Toolbar
    • Suggestion Menus
  • Custom Schemas
    • Custom Blocks
    • Custom Inline Content
    • Custom Styles
    • BlockNote with Ariakit
    • BlockNote with ShadCN and Tailwind
    • Grid Suggestion Menus
    • Next.js and BlockNote
    • Real-time Collaborative rich text editor
    • Usage Without React (Vanilla JS)
  • Community ↗ (opens in a new tab)
Question? Give us feedback → (opens in a new tab)Edit this page on GitHub
Docs
Styling & 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.

Export to docx (Office Open XML)Themes

Footer

BlockNote

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

Learn

  • Documentation
  • Examples
  • Releases

Collaborate

  • Partner with us
  • Sponsorships
  • Contribute

Community

  • GitHub
  • Discord

Theme

© 2024 BlockNote maintainers. All rights reserved.