BlockNote
DocsDocsExamplesExamplesPricingPricingAboutAbout
GitHubGitHubDiscordDiscord
  • Overview
    • Basic Setup
    • Displaying Document JSON
    • Default Schema Showcase
    • Displaying Selected Blocks
    • Manipulating Blocks
    • Uploading Files
    • Saving & Loading
    • Use with ShadCN
    • Use with Ariakit
    • Localization (i18n)
    • Removing UI Elements
    • Adding Formatting Toolbar Buttons
    • Adding Block Type Select Items
    • Adding Block Side Menu Buttons
    • Adding Drag Handle Menu Items
    • Adding Slash Menu Items
    • Replacing Slash Menu Component
    • Custom UIPro
    • Adding CSS Class to Blocks
    • Changing Editor Font
    • Overriding CSS Styles
    • Overriding Theme CSS Variables
    • Changing Themes Through Code
    • Converting Blocks to HTML
    • Parsing HTML to Blocks
    • Converting Blocks to Markdown
    • Parsing Markdown to Blocks
    • Alert Block
    • Mentions Menu
    • Font Style
    • PDF BlockPro
    • Collaborative Editing with PartyKit
    • Collaborative Editing with Liveblocks
Question? Give us feedback → (opens in a new tab)Edit this page on GitHub
Examples
UI Components
Custom UI

Custom UI

In this example, we replace the default Formatting Toolbar using a custom React component, as well as the default Slash Menu and Side Menu. The Formatting Toolbar is also made static and always visible above the editor.

Relevant Docs:

  • Formatting Toolbar
  • Manipulating Inline Content
  • Hooks
  • Slash Menu
  • Side Menu
  • Editor Setup

Pro Example

Get access to the full source code for pro examples by subscribing to BlockNote Pro

Get BlockNote Pro

Or via GitHub

Replacing Slash Menu ComponentAdding CSS Class to Blocks

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.