Example of Markdown Blocks in React Block Editor Component

All Controls
/
Block-editor
/
MarkdownBlocks

This sample demonstrates the Markdown templates viewer built with Block Editor, complete with a sidebar navigation tree, breadcrumb, and Markdown loading, editing and Download as Markdown capabilities.

More Details...

Loading....
Description

The Block Editor Documentation Preview is a powerful, interactive documentation system that combines BlockEditor with a collapsible sidebar, tree navigation, and Markdown rendering. It allows users to view, edit, and download documentation articles written in Markdown format.

Key features demonstrated in this sample:

  • Sidebar with TreeView Navigation: Hierarchical menu using ejs-treeview to browse documentation sections.
  • Markdown Loading: Loads .md files from the assets folder via fetch.
  • Markdown to BlockEditor Conversion: Uses MarkdownConverter and parseHtmlToBlocks() to convert Markdown to rich editable blocks.
  • Download as Markdown: Export current editor content back to clean Markdown using TurndownService.
  • Dockable & Responsive Sidebar: Collapsible sidebar with smooth open/close animation and mobile-friendly behavior.
  • Real-time Editing: Full Block Editor experience — formatting, lists, code blocks, mentions, slash commands, and more.
  • Clean UI with Toolbar: Professional layout with breadcrumb and download button using Toolbar and Breadcrumb components.

This sample serves as a complete template for building internal documentation portals, knowledge bases, technical wikis, or product guides using the Block Editor.