Introducing Milkdown: A plugin driven WYSIWYG markdown editor

Overview

Milkdown is a lightweight but powerful WYSIWYG markdown editor. It's made up by two parts:

• A tiny core which provide markdown parser, serializer and kinds of plugin loader.
• Lots of plugins provide syntax, commands and components.

With this pattern you can enable or disable any custom syntax you like, such as table, latex and slash commands.
You can even create your own plugin to support your awesome idea.

---

Links

• online editor
• documentation
• github

Features

• 📝 WYSIWYG Markdown - Write markdown in an elegant way
• 🎨 Themable - Theme can be shared and used with npm packages
• 🎮 Hackable - Support your awesome idea by plugin
• 🦾 Reliable - Built on top of prosemirror and remark
• ⚡️ Slash & Tooltip - Write fast for everyone, driven by plugin
• 🧮 Math - LaTeX math equations support, driven by plugin
• 📊 Table - Table support with fluent ui, driven by plugin

Tech Stack

Milkdown is built on top of these tools:

• Prosemirror and it's community - A toolkit for building rich-text editors on the web
• Remark and it's community - Markdown parser done right
• Postcss - Powerful css tool to build theme
• TypeScript - Developed by typescript
• Prism - Code snippets support
• Katex - LaTex math rendering

---

First editor

We have some pieces for you to create a very minimal editor:

We use material icon and Roboto Font in our theme.
Make sure to include them for having the best experience.

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

// import theme
import '@milkdown/theme-nord/lib/theme.css';

const root = document.body;
new Editor({ root }).use(commonmark).create();

---

For further information, please visit our website.