Examples

Browse through the examples below to see how to use and customize BlockNote.

Want to contribute? Copy the basic example on StackBlitz (opens in a new tab) and submit a PR.

Basic

Basic Setup

matthewlipski

Displaying Document JSON

yousefed

Multi-Column Blocks

yousefed

Default Schema Showcase

yousefed

Removing Default Blocks from Schema

hunxjunedo

Manipulating Blocks

matthewlipski

Displaying Selected Blocks

matthewlipski

Use with Ariakit

matthewlipski

Use with ShadCN

matthewlipski

Localization (i18n)

yousefed

Backend

Upload Files

matthewlipski

Saving & Loading

yousefed

Upload Files to AWS S3Pro

matthewlipski

Rendering static documents

yousefed

UI Components

Removing UI Elements

matthewlipski

Adding Formatting Toolbar Buttons

matthewlipski

Adding Block Type Select Items

matthewlipski

Adding Block Side Menu Buttons

matthewlipski

Adding Drag Handle Menu Items

matthewlipski

Adding Slash Menu Items

yousefed

Replacing Slash Menu Component

yousefed

Changing Emoji Picker Columns

yousefed

Replacing Emoji Picker Component

yousefed

Grid Mentions Menu

yousefed

Uppy File PanelPro

ezhil56x

Static Formatting Toolbar

matthewlipski

UI With Third-Party ComponentsPro

matthewlipski

Theming

Adding CSS Class to Blocks

matthewlipski

Changing Editor Font

matthewlipski

Overriding CSS Styles

matthewlipski

Overriding Theme CSS Variables

matthewlipski

Changing Themes Through Code

matthewlipski

Interoperability

Converting Blocks to HTML

matthewlipski

Parsing HTML to Blocks

matthewlipski

Converting Blocks to Markdown

yousefed

Parsing Markdown to Blocks

yousefed

Exporting documents to PDFPro

yousefed

Exporting documents to .docx (Office Open XML)Pro

yousefed

Custom Schemas

Alert Block

matthewlipski

Mentions Menu

yousefed

Font Style

matthewlipski

PDF BlockPro

matthewlipski

Collaboration

Collaborative Editing with PartyKit

yousefed

Collaborative Editing with Liveblocks

yousefed

Extensions

TipTap extension (arrow InputRule)Pro

komsenapati