Examples
Browse through the examples below to see how to use and customize BlockNote. Want to contribute? Copy the basic example on StackBlitz and submit a PR.
Basic
Basic Setup
by matthewlipski
Displaying Document JSON
by yousefed
Multi-Column Blocks
by yousefed
Default Schema Showcase
by yousefed
Removing Default Blocks from Schema
by hunxjunedo
Manipulating Blocks
by matthewlipski
Displaying Selected Blocks
by matthewlipski
Use with Ariakit
by matthewlipski
Use with ShadCN
by matthewlipski
Localization (i18n)
by yousefed
Change placeholder text
by ezhil56x
Multi-Editor Setup
by areknawo
Custom Paste Handler
by nperez0111
Backend
Upload Files
by matthewlipski
Saving & Loading
by yousefed
Upload Files to AWS S3
by matthewlipski
Rendering static documents
by yousefed
UI Components
Removing UI Elements
by matthewlipski
Adding Formatting Toolbar Buttons
by matthewlipski
Adding Block Type Select Items
by matthewlipski
Adding Block Side Menu Buttons
by matthewlipski
Adding Drag Handle Menu Items
by matthewlipski
Adding Slash Menu Items
by yousefed
Replacing Slash Menu Component
by yousefed
Changing Emoji Picker Columns
by yousefed
Replacing Emoji Picker Component
by yousefed
Grid Mentions Menu
by yousefed
Uppy File Panel
by ezhil56x
Static Formatting Toolbar
by matthewlipski
UI With Third-Party Components
by matthewlipski
Experimental Mobile Formatting Toolbar
by areknawo
Advanced Tables
by nperez0111
Theming
Adding CSS Class to Blocks
by matthewlipski
Changing Editor Font
by matthewlipski
Overriding CSS Styles
by matthewlipski
Overriding Theme CSS Variables
by matthewlipski
Changing Themes Through Code
by matthewlipski
Code Block Syntax Highlighting
by nperez0111
Custom Code Block Theme & Language
by nperez0111
Interoperability
Converting Blocks to HTML
by matthewlipski
Parsing HTML to Blocks
by matthewlipski
Converting Blocks to Markdown
by yousefed
Parsing Markdown to Blocks
by yousefed
Exporting documents to PDF
by yousefed
Exporting documents to .docx (Office Open XML)
by yousefed
Exporting documents to .odt (Open Document Text)
by areknawo
Exporting documents to React Email
by jmarbutt
Custom Schemas
Alert Block
by matthewlipski
Mentions Menu
by yousefed
Font Style
by matthewlipski
PDF Block
by matthewlipski
Alert Block with Full UX
by matthewlipski
Toggleable Custom Blocks
by matthewlipski
Collaboration
Collaborative Editing with PartyKit
by yousefed
Collaborative Editing with Liveblocks
by yousefed
Collaborative Editing with Y-Sweet
by jakelazaroff
Comments & Threads
by yousefed
Threads Sidebar
by matthewlipski
