Explore Milkdown: A Modular Open‑Source Markdown Editor for Developers

As the National Day holiday approaches, the author reflects on the growing popularity of Markdown editors and introduces Milkdown, an open‑source, minimalist Markdown editor that combines editing, component modularity, and plugin extensibility.

Milkdown’s design focuses on a clean, milk‑like experience, allowing users to select only the needed functional modules as plugins, reducing unnecessary resource usage and enabling personalized customization by publishing independent NPM packages.

Key features of Milkdown include:

Simple read/write syntax with only a dozen common markers.

Versatile usage for documentation and technical articles, clearly separating prose and code.

Easy export to HTML, PDF, and other formats.

The editor leverages several technologies:

ProseMirror for web‑based editor construction.

Remark as the Markdown parser.

TypeScript for type‑safe development.

Emotion for styling.

Prism for code block highlighting.

KaTeX for mathematical formula rendering.

Milkdown also offers an online demo where users can experiment with features such as creating tables by typing || followed by a space, then using the table toolbar for row and column operations.

Milkdown’s plugin ecosystem includes official plugins such as:

Name

Description

@milkdown/preset-commonmark

Adds CommonMark syntax support

@milkdown/preset-gfm

Adds GitHub Flavored Markdown support

@milkdown/plugin-history

Provides undo/redo functionality

@milkdown/plugin-clipboard

Enables Markdown‑format copy‑paste

@milkdown/plugin-cursor

Adds drop and gap cursor features

@milkdown/plugin-listener

Supports event listeners

@milkdown/plugin-collaborative

Enables collaborative editing

@milkdown/plugin-table

Provides table syntax (included in GFM)

@milkdown/plugin-prism

Integrates Prism for code highlighting

@milkdown/plugin-math

Supports LaTeX math formulas

@milkdown/plugin-tooltip

Adds a selection toolbar

@milkdown/plugin-slash

Introduces slash commands

@milkdown/plugin-emoji

Provides emoji support

Developers can create their own plugins with a simple two‑stage structure (preparation and execution). Below is a minimal example:

import { MilkdownPlugin } from '@milkdown/core';

const myPlugin: MilkdownPlugin = (pre) => {
    // #1 Preparation stage
    return async (ctx) => {
        // #2 Execution stage
    };
};

By experimenting with Milkdown, developers can quickly build a customized Markdown editing environment or contribute plugins to the community.