# Milkdown — Plugin-Driven WYSIWYG Markdown Editor Framework

> A headless markdown editor framework built on ProseMirror and Remark, designed for developers who want full control over editor behavior and appearance.

## Install

Save as a script file and run:

# Milkdown — Plugin-Driven WYSIWYG Markdown Editor Framework

## Quick Use
```bash
npm install @milkdown/kit @milkdown/theme-nord
```
```typescript
import { Editor } from "@milkdown/kit/core";
import { commonmark } from "@milkdown/kit/preset/commonmark";
import { nord } from "@milkdown/theme-nord";

Editor.make().use(commonmark).use(nord).create();
```

## 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

---
Source: https://tokrepo.com/en/workflows/asset-ffe11743
Author: Script Depot