Uncategorized

Milkdown: A Modern Markdown Editor Built for the Web

vijay k

Milkdown is a powerful, open-source, and developer-friendly markdown editor framework built with modern web technologies. It offers full customization, extensibility, and seamless integration for web applications that need a robust, WYSIWYG-like Markdown experience. Powered by ProseMirror, Milkdown provides a structured, plugin-based editor that supports both rich text and markdown syntax—perfect for blogs, CMS platforms, note-taking apps, documentation tools, and developer platforms.

Launched to fill the gap between lightweight markdown editors and full-fledged WYSIWYG tools, Milkdown combines the best of both worlds: a markdown-first editing experience with rich content capabilities.

🔍 What is Milkdown?

Milkdown is a headless markdown editor framework for the web. It’s built on top of ProseMirror, a powerful toolkit for building rich text editors in JavaScript. Unlike monolithic editors, Milkdown gives developers complete control over UI, styling, and features while offering a rich and structured markdown editing experience.

Milkdown supports:

  • CommonMark-compliant Markdown parsing/rendering
  • Real-time WYSIWYG editing
  • Custom plugins and extensions
  • Built-in slash command, code highlighting, math blocks, and more

Key Features:

  • 📦 Modular and plugin-first design
  • 🧩 Based on ProseMirror architecture
  • 💡 Supports collaborative editing, math typesetting (KaTeX), syntax highlighting
  • 🎨 Fully customizable themes
  • ⚙️ Works with React, Vue, Svelte, and Vanilla JS

💼 Major Use Cases of Milkdown

1. Content Management Systems (CMS)

Milkdown is ideal for CMS platforms where content creators need a live preview editor that supports markdown and rich text features.

2. Developer Blogs and Documentation Tools

Use Milkdown to enable interactive blogging interfaces that support code blocks, markdown, LaTeX, and live formatting.

3. Note-Taking Applications

Integrate Milkdown in apps like Notion, Obsidian, or Joplin-like platforms to support enhanced markdown-based editing.

4. Education Platforms

Provide math block support (KaTeX), collaborative editing, and image uploads for academic writing, quizzes, and student assignments.

5. Markdown-Based Collaborative Platforms

Build real-time collaborative editors (with WebSocket or WebRTC support) for documentation or discussion forums.

6. Static Site Builders and JAMstack Admin Panels

Offer headless markdown editing capabilities directly in static-site admin dashboards.

🏗 How Milkdown Works (Architecture Overview)

Milkdown follows a plugin-based architecture with ProseMirror as the core editor engine. It acts as a layered abstraction over ProseMirror, giving developers a simplified API while maintaining full control over editor internals.

🧩 Key Architecture Components

ComponentDescription
Editor Core (Milkdown)Manages editor initialization, state, and schema
ProseMirrorThe underlying rich text editor engine
PluginsAdd-on modules for slash commands, syntax highlight, toolbars, math, emoji, etc.
Markdown Parser/SerializerHandles conversion between markdown text and ProseMirror document
ThemesCSS-in-JS or class-based styling to support custom visuals
Commands and EventsHookable commands for triggering actions via buttons, keys, or slash menu

Milkdown uses markdown as the source of truth, meaning all changes in the editor can be converted to and from markdown text seamlessly. Its headless design allows full UI customization while maintaining rich editing capabilities.

🔄 Basic Workflow of Milkdown

👨‍💻 Developer Workflow

  1. Initialize the Milkdown editor in a container.
  2. Import and enable required plugins (e.g., syntax highlight, emoji, math).
  3. Set default content or load from a file/DB.
  4. Define themes or custom nodes (if needed).
  5. Bind save events to get markdown output.

👩‍💼 User Workflow

  1. Type or paste markdown content in the editor.
  2. Use live features (e.g., toolbar, slash commands) to format content.
  3. View real-time rendered output.
  4. Copy markdown or export to file (if supported).

🚀 Step-by-Step Getting Started Guide for Milkdown

✅ Step 1: Setup a New Web Project

Use Vite, Webpack, or a basic HTML + JS project.

npm init vite@latest milkdown-demo --template vanilla
cd milkdown-demo
npm install

📦 Step 2: Install Milkdown

npm install @milkdown/core @milkdown/preset-commonmark

You can add plugins as needed:

npm install @milkdown/plugin-syntax-highlight @milkdown/plugin-slash

📄 Step 3: Initialize the Editor

In main.js or equivalent:

import { Editor } from '@milkdown/core'
import { commonmark } from '@milkdown/preset-commonmark'

Editor.make()
  .use(commonmark)
  .create()

Ensure your HTML contains a container:

<div id="editor"></div>

🧩 Step 4: Add Plugins (Optional)

import { prism } from '@milkdown/plugin-syntax-highlight'
import { slash } from '@milkdown/plugin-slash'

Editor.make()
  .use(commonmark)
  .use(prism)
  .use(slash)
  .create()

🎨 Step 5: Customize Styling or Theme

Add your own CSS or use pre-built styles:

#editor {
  border: 1px solid #ddd;
  padding: 1rem;
  border-radius: 4px;
}

💾 Step 6: Read or Export Markdown

const editor = Editor.make().use(commonmark).create()
const markdown = await editor.action(ctx => ctx.get(editorStateCtx).doc.toString())
console.log('Markdown:', markdown)

Related Posts