Skip to content

iamdabe/Blazor-Markdown-Editor

Repository files navigation

Blazor Markdown Editor

A lightweight (<550kb) ProseMirror-based javascript Markdown editor with slash commands, table editing, and JSInterop-friendly APIs. Developed as I needed a WYSIWYG markdown editor for Blazor but all I could find was react and vue components. Can be used standalone or authored into component for Blazor.

Built with Claude

Just want to see it in action: Check the demo https://iamdabe.github.io/Blazor-Markdown-Editor/ on github pages.

Contents

Additional docs:

Features

  • Markdown-first authoring with ProseMirror document model and serializer
  • Blazor-focused JSInterop API: create, setMarkdown, getMarkdown, focus, destroy
  • Productive editing features: slash menu, table controls, link toolbar, and keyboard shortcuts

Why

Most Markdown editors rely on a split view which force users to constantly switch between writing and previewing. This project was created to simplify this and provide similar to experience to outline or DocMost i.e. edit text without getting markdown syntax everywhere. My usecase was for normal users who might not like seeing the syntax and would delete it thus removing the formatting.

Use the slash command menu or type markdown syntax and have it automatically convert to live formatting. For me, it's ideal for developers and creators who want a true WYSIWYG experience without giving up the flexibility and portability of Markdown.

Preview

Install

  1. Install dependencies:
    • npm ci
  2. Build distributable assets:
    • npm run build
  3. Include generated assets from wwwroot in your Blazor app:
    • blazor-markdown-editor.css
    • blazor-markdown-editor.js
    • blazor-markdown-editor.min.js
  4. Call the global API via JSInterop:
    • window.blazorMarkdownEditor.create(...)
    • window.blazorMarkdownEditor.setMarkdown(...)
    • window.blazorMarkdownEditor.getMarkdown(...)
    • window.blazorMarkdownEditor.focus(...)
    • window.blazorMarkdownEditor.destroy(...)

Versioning uses a calendar schema: YYYY.MINOR.PATCH (current: 2026.3.1).

Third-Party

  • markdown-it 14.1.0
  • prosemirror-commands 1.6.2
  • prosemirror-dropcursor 1.8.1
  • prosemirror-gapcursor 1.3.2
  • prosemirror-history 1.4.1
  • prosemirror-inputrules 1.4.0
  • prosemirror-keymap 1.2.2
  • prosemirror-markdown 1.13.2
  • prosemirror-model 1.24.1
  • prosemirror-schema-list 1.5.1
  • prosemirror-state 1.4.3
  • prosemirror-tables 1.8.3
  • prosemirror-view 1.38.1