Overview

MDXEditor is an open-source React component that lets users author markdown documents in a WYSIWYG manner. The component is tailored specifically to accommodate the markdown syntax constraints, which means that certain "rich" features are not supported. For example, the user cannot change the font size, the color, or the font family of the text. Also, there is no intermediate HTML representation of the markdown document. The component accepts and emits markdown as a string.

Markdown content has multiple applications, so the editor component itself is designed with a minimal "core" set of features, with everything else being enabled through plugins, including relatively common features such as headings, quotes, and links.

Architecture at a glance

The rich text editor engine is built on top of the Lexical editor framework. Unlike other similar solutions, Lexical supports complex nested editors for a specific purpose, like tables, code blocks, or even code blocks with live preview.

MDXEditor's markdown processing is built on top of the MDAST family of packages. The component implements a bi-directional conversion between the Markdown Abstract Syntax Tree (MDAST) and the Lexical AST by traversing each tree through a set of visitors that convert the nodes of one tree into the other. Depending on their purpose, some MDXEditor plugins extend the tree conversion by adding additional MDAST and/or Lexical AST visitors, and by adding additional Lexical nodes.

Note: MDXEditor uses the @lexical/markdown only for the provided markdown shortcuts. The built-in Lexical markdown processing is fairly limited and does not handle advanced cases like nested lists for example.

Is MDXEditor the right choice for my case?

It should be if you plan to use markdown as a persistent format for your content. Which is a good choice in many cases. Markdown is a popular, clean, tool-independent human-readable format that can be rendered using a variety of tools. It is a great choice for documentation, and it is also a good choice for storing content that is meant to be rendered in multiple formats, like HTML, PDF, or even Word documents. The fact that it is clean of presentation-related information makes it easy to change the looks of the document without affecting the content itself.

Since markdown rendering is so easy, MDXEditor does not need a "read-only" mode like other editors. You can simply render the markdown string in a markdown renderer of your choice, (next-mdx-remote being just one of the more convenient ones if you're using React/Next.js).

The built-in plugins are geared towards technical documentation, but the editor is extensible enough to accommodate other use cases as well. Depending on your use case, you can also write additional plugins to handle certain markdown constructs.

Help and support

The editor is developed in the open, in the mdx-editor/editor GitHub repository - give the project a star! I would be more than happy to discuss ideas and potential contributions - open an issue or start a discussion. You can also reach out to me via email if you prefer.

About the author

I've spent most of my professional career working on components for web developers. Another popular project of mine is react-virtuoso, a React component for efficiently rendering large lists and tabular data. You can find me on Twitter and LinkedIn.