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
Change placeholder text ezhil56x
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