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();