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 yousefedDisplaying Selected Blocks matthewlipskiManipulating Blocks matthewlipskiUploading Files matthewlipskiSaving & Loading yousefedUse with ShadCN matthewlipskiUse with Ariakit matthewlipskiLocalization (i18n) yousefed
matthewlipski yousefed yousefed matthewlipski matthewlipski matthewlipski yousefed matthewlipski 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 yousefedCustom UI matthewlipski
matthewlipski matthewlipski matthewlipski matthewlipski matthewlipski yousefed yousefed 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 yousefed
matthewlipski matthewlipski yousefed yousefed