BlockNote
DocsDocsExamplesExamplesPricingPricingAboutAbout
GitHubGitHubDiscordDiscord
  • Overview
    • Basic Setup
    • Displaying Document JSON
    • Multi-Column BlocksPro
    • Default Schema Showcase
    • Removing Default Blocks from Schema
    • Manipulating Blocks
    • Displaying Selected Blocks
    • Use with Ariakit
    • Use with ShadCN
    • Localization (i18n)
    • Change placeholder text
    • Multi-Editor Setup
    • Custom Paste Handler
    • Upload Files
    • Saving & Loading
    • Upload Files to AWS S3Pro
    • Rendering static documents
    • 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
    • Changing Emoji Picker Columns
    • Replacing Emoji Picker Component
    • Grid Mentions Menu
    • Uppy File PanelPro
    • Static Formatting Toolbar
    • UI With Third-Party ComponentsPro
    • Experimental Mobile Formatting Toolbar
    • Advanced Tables
    • Adding CSS Class to Blocks
    • Changing Editor Font
    • Overriding CSS Styles
    • Overriding Theme CSS Variables
    • Changing Themes Through Code
    • Code Block Syntax Highlighting
    • Custom Code Block Theme & Language
    • Converting Blocks to HTML
    • Parsing HTML to Blocks
    • Converting Blocks to Markdown
    • Parsing Markdown to Blocks
    • Exporting documents to PDFPro
    • Exporting documents to .docx (Office Open XML)Pro
    • Exporting documents to .odt (Open Document Text)Pro
    • Alert Block
    • Mentions Menu
    • Font Style
    • PDF BlockPro
    • Alert Block with Full UX
    • Collaborative Editing with PartyKit
    • Collaborative Editing with Liveblocks
    • Collaborative Editing with Y-Sweet
    • Comments & Threads
    • Threads Sidebar
    • TipTap extension (arrow InputRule)Pro
Question? Give us feedback → (opens in a new tab)Edit this page on GitHub
Examples
Basic
Multi-Column Blocks

Multi-Column Blocks

This example showcases multi-column blocks, allowing you to stack blocks next to each other. These come as part of the @blocknote/xl-multi-column package.

Relevant Docs:

  • Editor Setup
  • Document Structure

Pro Example

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

Get BlockNote Pro

Or sign in

Displaying Document JSONDefault Schema Showcase

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

Legal

  • Terms & Conditions
  • Privacy Policy

Theme

© 2025 BlockNote maintainers. All rights reserved.