Markdown Editor for Blazor (v10.0.3)

Production-ready Markdown editor component wrapping EasyMDE with everything bundled — Mermaid diagrams, highlight.js syntax highlighting, callout blocks, video embeds, image upload, auto-save, and fully customisable toolbar. Drop into any Blazor Server or Hybrid app.

Features

Content rendering (live preview)

• Mermaid diagrams — flowcharts, sequence, class, state, ER, Gantt, pie, mindmap, timeline, gitGraph, journey, quadrant — all rendered inline via EnableMermaid="true". v11+ bundled.
• Syntax highlighting (highlight.js) — 190+ languages coloured in the preview via EnableHighlight="true". Choose your theme with HighlightTheme="github.min.css" (or any other).
• Alert / callout blocks — four built-in block types (note, tip, warning, attention) rendered as colour-bordered callouts. Toolbar buttons insert the correct fence. Alerts can contain any Markdown.
• Video embeds — video fenced block auto-detects YouTube, Vimeo, and direct MP4/WebM URLs. Responsive iframe in the preview.
• Tables, task lists, strikethrough, footnotes — GitHub-Flavored Markdown baseline.
• Live preview modes — edit only, preview only, or scroll-synced side-by-side.

Editor UX

• Resize handle — Resize="vertical" / "horizontal" / "both" / "none". Default none.
• Min/Max height — MinHeight="200px" MaxHeight="400px" keeps the footprint predictable.
• Auto-save — configurable debounce (AutoSaveEnabled, AutoSaveId, AutoSaveDelay, customisable timestamp format).
• Spell checker — native browser or EasyMDE-built, toggleable.
• Full screen — F11 distraction-free mode, configurable FullScreenZIndex.
• Line numbers, line wrapping, tab size, direction (LTR/RTL) — every EasyMDE option exposed.
• Dark mode aware — styles respect Bootstrap's data-bs-theme.

Integration points

• Two-way binding — @bind-Value for source Markdown, ValueHTMLChanged callback for rendered HTML.
• Image upload — built-in or bring-your-own via CustomImageUpload callback (save to S3, CDN, local disk, anywhere). Drag-and-drop or paste from clipboard. Chunked upload with progress callbacks.
• Custom toolbar — full override via <Toolbar> child content with <MarkdownToolbarButton> for built-in actions OR custom named buttons that fire CustomButtonClicked. Insert templates at cursor programmatically.
• Keyboard shortcuts — standard Markdown shortcuts (Ctrl+B, Ctrl+I, Ctrl+K, F11, F9) out of the box.
• insertTextAtCursor() JS interop — programmatically inject content from anywhere in your app.
• Events — CustomButtonClicked, ValueChanged, ValueHTMLChanged, ImageUploadStarted/Progressed/Ended/Changed, ErrorCallback.

Bundled dependencies

Everything needed ships with the package — no CDN required:

• EasyMDE latest — underlying editor
• Mermaid v11+ — diagrams (lazily loaded when EnableMermaid="true")
• highlight.js v11+ — syntax highlighting (lazily loaded when EnableHighlight="true")
• alert.css — callout styling
• Over a dozen highlight.js themes bundled (github.min.css, atom-one-dark.min.css, monokai.min.css, etc.)

What's included

• Compiled NuGet package (.nupkg) with symbols — published on nuget.org as PSC.Blazor.Components.MarkdownEditor 10.0.3
• Standalone .Demo Blazor Server project — unzip, dotnet run, see it live with example pages for Mermaid, Resize, Upload, Custom Toolbar, Insert Link
• README with integration examples and recipes
• LICENCE.md (one developer perpetual, unlimited end users, no redistribution)

Add to your project

1. Install the package

dotnet add package PSC.Blazor.Components.MarkdownEditor --version 10.0.3

2. Use in any Razor file — the package auto-injects its CSS/JS via _content/ when the component first renders:

@using PSC.Blazor.Components.MarkdownEditor
@using PSC.Blazor.Components.MarkdownEditor.Enums

<MarkdownEditor @bind-Value="myMarkdown"
                Placeholder="Write something awesome…"
                MinHeight="200px" MaxHeight="400px"
                Resize="vertical"
                EnableMermaid="true"
                EnableHighlight="true"
                HighlightTheme="github.min.css" />

@code {
    string myMarkdown = "";
}

That's the whole integration. No DI registration, no manual asset links, no custom scripts.

Optional: custom image upload

<MarkdownEditor @bind-Value="body"
                UploadImage="true"
                CustomImageUpload="HandleImageUpload"
                ImageMaxSize="@(10 * 1024 * 1024)" />

@code {
    async Task<FileEntry> HandleImageUpload(MarkdownEditor editor, FileEntry file) {
        // Save `file.Stream` wherever you want
        var url = $"/uploads/{Guid.NewGuid()}{Path.GetExtension(file.Name)}";
        // ... save to disk / S3 / CDN ...
        file.Url = url;
        return file;
    }
}

Optional: custom toolbar with built-in callouts

<MarkdownEditor @bind-Value="body" EnableMermaid="true" EnableHighlight="true">
    <Toolbar>
        <MarkdownToolbarButton Action="MarkdownAction.Bold" />
        <MarkdownToolbarButton Action="MarkdownAction.Italic" />
        <MarkdownToolbarButton Action="MarkdownAction.Heading" Separator="true" />
        <MarkdownToolbarButton Action="MarkdownAction.UnorderedList" />
        <MarkdownToolbarButton Action="MarkdownAction.Link" Separator="true" />
        <MarkdownToolbarButton Action="MarkdownAction.Preview" />
        <MarkdownToolbarButton Action="MarkdownAction.SideBySide" />
    </Toolbar>
</MarkdownEditor>

Omit <Toolbar> to get the full default toolbar including Mermaid, callouts (N/T/W/A), video, and syntax highlighting actions.

Requirements

• .NET 10 SDK
• Blazor Server or Hybrid (does not run in WASM-only mode — EasyMDE requires JS interop)

Not what you want?

See the Wiki component — it includes MarkdownEditor plus a full documentation platform with pages, books, categories, versioning, visibility rules, short-URL image serving, and Markdown/Docsify export.