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
matthewlipskiDisplaying Document JSON
yousefedMulti-Column Blocks yousefedDefault Schema Showcase yousefedRemoving Default Blocks from Schema
hunxjunedoManipulating Blocks matthewlipskiDisplaying Selected Blocks matthewlipskiUse with Ariakit matthewlipskiUse with ShadCN matthewlipskiLocalization (i18n) yousefedChange placeholder text
ezhil56xMulti-Editor Setup
areknawo
matthewlipski yousefed yousefed yousefed hunxjunedo matthewlipski matthewlipski matthewlipski matthewlipski yousefed ezhil56x areknawoBackend
Upload Files matthewlipskiSaving & Loading yousefedUpload Files to AWS S3Pro matthewlipskiRendering static documents yousefed
matthewlipski yousefed matthewlipski yousefedUI Components
Removing UI Elements matthewlipskiAdding Formatting Toolbar Buttons matthewlipskiAdding Block Type Select Items matthewlipskiAdding Block Side Menu Buttons matthewlipskiAdding Drag Handle Menu Items matthewlipskiAdding Slash Menu Items yousefedReplacing Slash Menu Component yousefedChanging Emoji Picker Columns yousefedReplacing Emoji Picker Component yousefedGrid Mentions Menu yousefedUppy File PanelPro ezhil56xStatic Formatting Toolbar matthewlipskiUI With Third-Party ComponentsPro matthewlipskiExperimental Mobile Formatting Toolbar areknawoAdvanced Tables
nperez0111
matthewlipski matthewlipski matthewlipski matthewlipski matthewlipski yousefed yousefed yousefed yousefed yousefed ezhil56x matthewlipski matthewlipski areknawo nperez0111Theming
Adding CSS Class to Blocks matthewlipskiChanging Editor Font matthewlipskiOverriding CSS Styles matthewlipskiOverriding Theme CSS Variables matthewlipskiChanging Themes Through Code matthewlipski
matthewlipski matthewlipski matthewlipski matthewlipski matthewlipskiInteroperability
Converting Blocks to HTML matthewlipskiParsing HTML to Blocks matthewlipskiConverting Blocks to Markdown yousefedParsing Markdown to Blocks yousefedExporting documents to PDFPro yousefedExporting documents to .docx (Office Open XML)Pro yousefedExporting documents to .odt (Open Document Text)Pro areknawo
matthewlipski matthewlipski yousefed yousefed yousefed yousefed areknawoCustom Schemas
Collaboration
Collaborative Editing with PartyKit yousefedCollaborative Editing with Liveblocks yousefedCollaborative Editing with Y-Sweet
jakelazaroffComments & Threads yousefed
yousefed yousefed jakelazaroff yousefed