Milkdown — Plugin-Driven WYSIWYG Markdown Editor Framework

Introduction

Milkdown is a plugin-driven, framework-agnostic markdown editor built on top of ProseMirror for rich-text editing and Remark for markdown parsing. It gives developers a composable toolkit to build customized editing experiences without being locked into a specific UI.

What Milkdown Does

• Renders markdown as a WYSIWYG rich-text editor powered by ProseMirror
• Parses and serializes markdown via the Remark ecosystem for standards compliance
• Provides a plugin architecture where every feature is an optional module
• Ships preset plugins for CommonMark and GitHub Flavored Markdown
• Supports React, Vue, Svelte, and vanilla JS through official framework integrations

Architecture Overview

Milkdown separates concerns into three layers: the Remark layer handles markdown parsing and serialization, the ProseMirror layer manages the rich-text document model and editing operations, and the plugin layer connects the two while adding features like slash commands, tooltips, and collaborative editing. Plugins communicate through a dependency injection system called the Milkdown context, which manages shared state and lifecycle hooks.

Self-Hosting & Configuration

• Install the core package and any presets you need via npm or yarn
• Choose a theme package or create a custom theme with CSS variables
• Add plugins incrementally: slash commands, collaborative editing, image upload, etc.
• Configure each plugin through its options API when registering with the editor
• For collaborative editing, integrate with y-prosemirror and a Yjs provider

Key Features

• Fully headless: bring your own UI, theme, and interaction patterns
• Plugin system with dependency injection and lifecycle management
• First-class collaborative editing support via Yjs integration
• Slash commands, toolbar, and tooltip plugins available out of the box
• TypeScript-first with full type safety across the plugin API

Comparison with Similar Tools

• Tiptap — also ProseMirror-based but focused on rich text; Milkdown is markdown-native
• BlockNote — opinionated block editor; Milkdown offers more low-level control
• Lexical — Meta's editor framework with a different document model; Milkdown uses ProseMirror
• ProseMirror — the underlying engine; Milkdown adds markdown parsing and a plugin framework on top

FAQ

Q: Can I use Milkdown with React? A: Yes. The official @milkdown/react package provides hooks and components for React integration.

Q: Does it support tables and code blocks? A: Yes, via the GFM preset plugin which adds tables, strikethrough, task lists, and fenced code blocks.

Q: How large is the bundle? A: The core with CommonMark preset is roughly 150KB gzipped. You can tree-shake unused plugins.

Q: Can I extend it with custom markdown syntax? A: Yes. Write a Remark plugin for parsing and a ProseMirror plugin for rendering, then register both.

Sources

• https://github.com/Milkdown/milkdown
• https://milkdown.dev