There are numerous WYSIWYG editors available, which makes it challenging to choose one. In this post, we’ll evaluate Milkdown, a new WYSIWYG editor against some of its top competitors. Here’s what we’ll cover:
Milkdown is an open source, WYSIWYG Markdown editor. Its aim is to provide an editor component that is powerful, extensible, and can be used anywhere. It is:
Milkdown is internally made up of two parts, according to the official site:
The benefit of a plugin-based system is that you can easily enable and disable custom features. It will also help in making sure that you only ship the code you need to ship.
It also supports some cool features that are available via official and community plugins:
The Milkdown site explains it beautifully:
There are kinds of different markdown editors, such as Typora, tui, and Bear. They work pretty well for writing notes in Markdown on different platforms. So why bother making Milkdown?
Milkdown aims to provide a open source solution for developers to make their editors more powerful, attractive, and used everywhere.
Most editors don’t give you the full power to customize everything. Some are paid. Some are not as feature-rich as others. Milkdown takes a different approach by providing many features out of the box. If you’re not satisfied with the features available, you might be able to create the specific functionality you’re looking for with the help of its plugin-based system.
You can find official plugins on the Milkdown site and community plugins on GitHub.
Note: Since Milkdown is a wrapper for ProseMirror, you can use all of its functionality, too, such as collaboration, linters, etc.
Below is a basic example of using Milkdown with vanilla TypeScript. This example is inspired by the Milkdown docs:
// These two imports are important to render the editor
import { Editor, defaultValueCtx, rootCtx } from "@milkdown/core";
import { commonmark } from "@milkdown/preset-commonmark";
// Plugins: Use based on your requirement
import { gfm } from "@milkdown/preset-gfm";
import { nord } from "@milkdown/theme-nord";
import { menu } from "@milkdown/plugin-menu";
import '@milkdown/theme-nord/style.css'
// Default value
const markdown = `
# Test demo.
- [x] Hello
- [ ] World
- [x] Testing
- Remirror
\`\`\`ts
const new = 1
\`\`\`
`;
async function main() {
await Editor.make()
.config((ctx) => {
// By default it set to `document.body`. In this case we want to load editor on dom with id app
ctx.set(rootCtx, "#app");
ctx.set(defaultValueCtx, markdown.trim());
})
.use(commonmark)
.use(nord)
.use(menu)
.use(gfm)
.create();
}
main();
You can play around with our example demo on StackBlitz and the official demo on the Milkdown site.
Quill.js is a popular open-source JavaScript library for building rich text editors on the web .
It is lightweight, easy to use, and provides a powerful set of features alongside a wealth of resources and community support. It is suitable for basic text formatting and editing tasks, uses a modular design approach, and gives developers the flexibility to customize and extend the editor’s functionality. Quill.js is also well-supported across browsers.
Quill.js lets you customize the editor’s interface. By default, it supports a minimal plug-n-play interface and uses a semantic naming convention, so there’s no need to learn technical jargon to work with the editor, as there would be with something like ProseMirror.
Other features include:
Overall, Quill.js has fewer features than Milkdown:
This example is inspired by the Quill.js documentation:
<html>
<head>
<title>Quilljs Example</title>
<meta charset="UTF-8" />
<link
href="https://cdn.quilljs.com/1.3.6/quill.snow.css"
rel="stylesheet"
/>
</head>
<body>
<!-- Include stylesheet -->
<!-- Create the editor container -->
<div id="editor">
<p>Hello World!</p>
<p>Some initial <strong>bold</strong> text</p>
<p><br /></p>
</div>
<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<!-- Initialize Quill editor -->
<script>
var quill = new Quill("#editor", {
theme: "snow"
});
</script>
</body>
</html>
You can learn more about Quill.js on their website.
ProseMirror is also an open source JavaScript library built by the same author who built CodeMirror. It is also somewhat similar to Quill.js, in that it too provides a set of tools and concepts for building a rich text editor. It’s another highly customizable and extensible library with comprehensive documentation and a large community of users who have helped build a wide range of text-editing features.
It’s important to note here that Milkdown is built on top of ProseMirror. This means that whatever ProseMirror offers, you can also use in Milkdown.
Here is a basic example inspired by the ProseMirror docs:
Learn more →import { EditorState } from "prosemirror-state";
import { EditorView } from "prosemirror-view";
import { Schema, DOMParser } from "prosemirror-model";
import { schema } from "prosemirror-schema-basic";
import { addListNodes } from "prosemirror-schema-list";
import { exampleSetup } from "prosemirror-example-setup";
import "prosemirror-menu/style/menu.css";
// Mix the nodes from prosemirror-schema-list into the basic schema to
// create a schema with list support.
const mySchema = new Schema({
nodes: addListNodes(schema.spec.nodes, "paragraph block*", "block"),
marks: schema.spec.marks
});
window.view = new EditorView(document.querySelector("#editor"), {
state: EditorState.create({
doc: DOMParser.fromSchema(mySchema).parse(
document.querySelector("#content")
),
plugins: exampleSetup({ schema: mySchema })
})
});
TinyMCE is another Milkdown alternative. According to their GitHub page:
Used and trusted by millions of developers, TinyMCE is the world’s most customizable, scalable, and flexible rich text editor.
With more than 350M+ downloads every year, we’re also one of the most trusted enterprise-grade open source HTML editors on the internet. There’s currently more than 100M+ products worldwide, powered by Tiny. As a high powered WYSIWYG editor, TinyMCE is built to scale, designed to innovate, and thrives on delivering results to difficult edge-cases.
You can find the full list of features here.
The basic setup example is borrowed from TinyMCE’s documentation:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script
src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js"
referrerpolicy="origin"
></script>
<script>
tinymce.init({
selector: "#mytextarea"
});
</script>
</head>
<body>
<h1>TinyMCE Quick Start Guide</h1>
<form method="post">
<textarea id="mytextarea">Hello, World!</textarea>
</form>
</body>
</html>
Toast UI is another popular open source editor. It provides two editing modes: Markdown and WYSIWYG, which can be switched at any point of time. It follows CommonMark and GFM (GitHub-flavored Markdown) specifications, both of which are widely used in the software industry.
With the help of official plugins you can also extend editor functionality as well. Some extensions include:
Both libraries are a similar kind of editor, but Toast UI has been around in the market for a long time. It is well-tested and supported by the community.
If your use case included a need for displaying an iframe, highlight text color, or some other special type of content during editing, Toast UI Editor can be very helpful because of its less complex API and ability to add custom functionality. The learning curve for creating widgets and plugins is less complex compare to other editors.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div id="editor"></div>
<script src="src/index.ts" type="module"></script>
</body>
</html>
import Editor from "@toast-ui/editor";
import "@toast-ui/editor/dist/toastui-editor.css";
const editor = new Editor({
el: document.querySelector("#editor")
});
In this post, we’ve discussed Milkdown, a new-in-market editor with strong features. Its main drawback currently is that its community is not as strong as other editors: if an issue arises, you’ll probably end up spending extra time troubleshooting it. Therefore, use it at your own risk.
In the end, your choice of editor relies on your requirements. While other open source editors are better for basic applications, Toast UI and TinyMCE are ideal choices if you wanted to construct a complicated application with a lot of features. There isn’t a single editor that fits every need.
With the aid of plugins, free editors may perform just as well as those that cost money, especially when the communities are as robust as ProseMirror’s and Quill.js’s
There’s no doubt that frontends are getting more complex. As you add new JavaScript libraries and other dependencies to your app, you’ll need more visibility to ensure your users don’t run into unknown issues.
LogRocket is a frontend application monitoring solution that lets you replay JavaScript errors as if they happened in your own browser so you can react to bugs more effectively.
LogRocket works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app’s performance, reporting metrics like client CPU load, client memory usage, and more.
Build confidently — start monitoring for free.
Hey there, want to help make our blog better?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up now
Whether you’re part of the typed club or not, one function within TypeScript that can make life a lot easier is object destructuring.
useStateuseState can effectively replace ref in many scenarios and prevent Nuxt hydration mismatches that can lead to unexpected behavior and errors.
Explore the evolution of list components in React Native, from `ScrollView`, `FlatList`, `SectionList`, to the recent `FlashList`.
Explore the benefits of building your own AI agent from scratch using Langbase, BaseUI, and Open AI, in a demo Next.js project.
One Reply to "Comparing Milkdown with other WYSIWYG editors"
Suprising that this article pretends to be from 2023, when QuillJS that it mentions is dead for about 4 years now, no update since 2019 and thousand+ bugs reported in repo. Please do not promote dead and bugged software