Guide · Open source
How to use Milkdown: install, set up an editor and extend it
Updated · written with AI from the project's own documentation and checked against our catalogue data
Milkdown is an open-source TypeScript framework for building WYSIWYG markdown editors, where text appears formatted as you type instead of showing raw markdown symbols. This guide is for developers who want to add a markdown-style editing box to their own web application. By the end you will know what Milkdown is built on, how to install the core package, and how its plugin model fits together.
MilkdownMilkdown/milkdown · ★ 12k · MIT Install options & downloads Quick start
- 1Confirm prerequisites. Make sure Node.js and npm, or another JavaScript package manager, are installed.
- 2Install the core package. Run npm install @milkdown/core in your project directory.
- 3Read the official documentation. Open milkdown.dev to learn how to create an editor and configure it.
- 4Choose plugins. Add only the plugins your editor needs, since the framework is plugin-driven.
- 5Build and test in your web app. Integrate the editor into your application and check how it behaves with your content.
What Milkdown is and how it is built
Milkdown is a plugin-driven WYSIWYG markdown editor framework. According to its README, it is inspired by the Typora editor and built on top of ProseMirror and remark.
It is a framework, not an end-user app. You use it to build an editor inside your own product rather than installing a ready-made notes application.
- Editing style: WYSIWYG, so formatting is shown as you write
- Foundations: ProseMirror for the editor and remark for markdown
- Architecture: organized around plugins
- Language: TypeScript
- License: MIT
Check the prerequisites
The install method listed for Milkdown is a package manager. You need Node.js and npm or another JavaScript package manager. The source does not list other requirements, so check the official documentation for anything beyond these.
- Node.js
- npm or another JavaScript package manager
Install the core package
The core package is published on npm as @milkdown/core. Install it in your project with the command below from the project README.
Other Milkdown packages are published under the @milkdown scope on npm, as the README's download link suggests. The README does not list their names, so look them up in the official documentation.
npm install @milkdown/coreUnderstand the plugin-driven model
Milkdown is organized around plugins, so features are added by including plugins rather than being fixed in one monolithic editor. This is the main strength of the framework and also its main learning curve.
The README points to the official documentation at milkdown.dev for usage details. Read it before building anything complex, since the source here does not describe the plugin API.
- Start with the core package and add only the plugins you need
- Expect to learn ProseMirror-style editor concepts
Find documentation, community and contribution paths
The official documentation is at milkdown.dev. The project also has a Discord community and a contribution guide in CONTRIBUTING.md on GitHub. A TODO project page and milestones show planned and in-progress work.
If you want to contribute code, follow the contribution guide in the repository rather than guessing the workflow.
- Documentation: milkdown.dev
- Community: Discord, linked from the README
- Contributing: CONTRIBUTING.md in the repository
- Roadmap: the Milkdown TODO project page and milestones on GitHub
What people use it for
- Adding a rich markdown editing box to a web application
- Building a content editor where users see formatted text while typing
- Creating an editor extended with custom or community plugins
- Building an in-app documentation or notes editor for your own product
Frequently asked questions
Is Milkdown free to use?
Yes. Milkdown is released under the MIT licence, as stated in the README and the project's License section. Check the LICENSE file in the repository for the full terms.
What do I need to install Milkdown?
The source lists Node.js and npm or another JavaScript package manager as prerequisites. Install the core package with npm install @milkdown/core.
Is Milkdown a note-taking app?
No. Milkdown is a framework for developers building editors into their own web applications. It is not a ready-made end-user note-taking app.
What is Milkdown built on?
According to the README, Milkdown is built on top of ProseMirror and remark. It is inspired by the Typora editor.
How does Milkdown compare to TipTap, Lexical or Toast UI Editor?
These are listed as comparable projects in the source, but the source does not compare them in detail. Evaluate each against your needs, such as plugin model, framework fit and setup effort.
Where can I get help with Milkdown?
The README links to the official documentation at milkdown.dev and a Discord community. For contributing, see CONTRIBUTING.md in the repository.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Milkdown suits developers who want to add a WYSIWYG markdown editor to a TypeScript web app and are comfortable with ProseMirror-style editors and plugins. If you need a finished note-taking app or a simple drop-in widget with minimal setup, pick a different tool.
Install options & downloads