Example of Markdown Blocks in ASP.NET Core Block Editor Control

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.

DEMO

SOURCE

Markdown Templates

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.