Build a Powerful WYSIWYG Markdown Editor with Milkdown – A Frontend Guide

For content platforms, a robust editor is essential, and Markdown is favored by many programmers because it enables formatting through syntax, quickly creates complex content like code blocks and formulas, and lets creators focus on writing.

However, Markdown also has drawbacks: it has a learning curve for non‑programmers and requires tools to preview the rendered result.

To retain Markdown’s convenience while lowering the barrier, many experienced users mention Typora, but it is not open source. Milkdown provides an open‑source alternative that combines a high‑quality WYSIWYG experience with a plugin architecture.

Milkdown is a visually appealing, extensible Markdown editor, component, and plugin suite. It offers all the desired features out of the box, and unnecessary ones can be removed by disabling plugins, reducing bundle size. The project includes thorough Chinese documentation to help developers quickly customize their own editor.

Getting Started

Two ways to try Milkdown immediately:

Online demo: https://milkdown.dev/#/online-demo

VS Code extension: https://marketplace.visualstudio.com/items?itemName=mirone.milkdown

Feature Showcase

Convenient table editing, copy‑paste of Markdown text, collaborative editing, and unique two‑way binding are demonstrated with the following images.

First Editor

Install the core packages via npm:

<code>npm i @milkdown/core @milkdown/preset-commonmark @milkdown/theme-nord</code>

Initialize the editor:

<code>import { Editor } from '@milkdown/core';
import { nord } from '@milkdown/theme-nord';
import { commonmark } from '@milkdown/preset-commonmark';

Editor
  .make()
  .use(nord)
  .use(commonmark)
  .create();</code>

The

make

method creates the editor instance,

use

loads plugins, and

create

renders the editor.

Rich Plugin Ecosystem

Milkdown’s functionality is provided through plugins. Some notable plugins include:

plugin-clipboard : adds Markdown‑style copy‑paste support

plugin-cursor : adds drop and gap cursor handling

plugin-listener : adds event listeners

plugin-collaborative : enables collaborative editing

plugin-table : provides table syntax (already in GFM)

plugin-prism : integrates Prism for code block highlighting

Technology Stack

ProseMirror – toolkit for building rich‑text editors on the web

Remark – robust Markdown parser

TypeScript – source language

Emotion – CSS‑in‑JS styling solution

Prism – code block highlighting

KaTeX – high‑performance math formula rendering

Because ContentEditable is fraught with pitfalls, Milkdown builds on ProseMirror, which offers a mature architecture and clean API.

Architecture

ProseMirror’s core logic resembles React’s functional data mapping, connecting UI and internal state. The editor’s state is stored in EditorState , which produces an EditorView (the UI). User actions generate DOM events, which create Transaction objects that modify the state, similar to Redux actions. The new EditorState is then derived, forming a loop.

Remark provides an abstract syntax tree (AST) for Markdown, enabling a bridge between ProseMirror’s state and Markdown’s structure.

Markdown <-> Remark AST <-> ProseMirror State <-> UI

Conclusion

The author tried many closed‑source Markdown editors but found them either bloated or too simple. Milkdown was created to offer a fully open‑source, highly customizable editor that both programmers and non‑programmers can use. If Milkdown helps you, consider giving the project a star.

https://github.com/Saul-Mirone/milkdown