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
yousefedDefault Schema Showcase yousefedRemoving Default Blocks from Schema
hunxjunedoManipulating Blocks matthewlipskiDisplaying Selected Blocks matthewlipskiUse with Ariakit matthewlipskiUse with ShadCN matthewlipskiLocalization (i18n) yousefed
matthewlipski yousefed yousefed hunxjunedo matthewlipski matthewlipski matthewlipski matthewlipski yousefedBackend
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 matthewlipski
matthewlipski matthewlipski matthewlipski matthewlipski matthewlipski yousefed yousefed yousefed yousefed yousefed ezhil56x matthewlipski matthewlipskiTheming
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 yousefed
matthewlipski matthewlipski yousefed yousefed yousefed yousefed