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.
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 TreeView to browse documentation sections. Markdown Loading: Loads .md files from the assets folder. Markdown to BlockEditor Conversion: Converts Markdown to rich editable blocks using the Markdown Converter and parseHtmlToBlocks(). 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.