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 BlocksPro 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
areknawoCustom Paste Handler
nperez0111
matthewlipski yousefed yousefed yousefed hunxjunedo matthewlipski matthewlipski matthewlipski matthewlipski yousefed ezhil56x areknawo nperez0111Backend
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 matthewlipskiCode Block Syntax Highlighting nperez0111Custom Code Block Theme & Language nperez0111
matthewlipski matthewlipski matthewlipski matthewlipski matthewlipski nperez0111 nperez0111Interoperability
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 areknawoExporting documents to React EmailPro
jmarbutt
matthewlipski matthewlipski yousefed yousefed yousefed yousefed areknawo jmarbuttCustom Schemas
Alert Block matthewlipskiMentions Menu yousefedFont Style matthewlipskiPDF BlockPro matthewlipskiAlert Block with Full UX matthewlipskiToggleable Custom Blocks matthewlipski
matthewlipski yousefed matthewlipski matthewlipski matthewlipski matthewlipskiCollaboration
Collaborative Editing with PartyKit yousefedCollaborative Editing with Liveblocks yousefedCollaborative Editing with Y-Sweet
jakelazaroffComments & Threads yousefedThreads Sidebar matthewlipski
yousefed yousefed jakelazaroff yousefed matthewlipski