// the find
mdx-editor/editor
A rich text editor React component for markdown
MDXEditor is a React rich-text editor for markdown and MDX, built on Lexical. It gives users a WYSIWYG surface that round-trips to markdown, including JSX components — a genuinely hard problem that most editors sidestep. Aimed at apps where non-technical users need to write MDX without touching raw syntax.
The plugin architecture is well-thought-out: each feature (tables, code blocks, frontmatter, directives) is an opt-in plugin, so you don't pay for what you don't use. Built on Lexical (Meta's editor framework) rather than a bespoke AST, which means the low-level editing behavior is not the author's problem to maintain. MDX JSX editing is genuinely rare — most editors give up and drop into a raw textarea for components; this one lets you configure custom editors per component. The diff/source toggle plugin is practical for developers who want to verify the markdown output without leaving the editor.
Controlled mode (passing `markdown` as a prop and expecting React re-renders) has documented rough edges and an escape hatch via imperative refs — a sign the Lexical model and React's model don't compose cleanly here. The issue tracker has a long tail of markdown round-trip bugs where complex nesting (lists inside blockquotes, inline code near emphasis) gets mangled on load or save; this is the fundamental tension of the WYSIWYG-to-text model. Single maintainer with a sponsorship ask for commercial support, which is honest but means the bus factor is one. Bundle size is non-trivial — you're pulling in Lexical, CodeMirror, and the full remark/mdast pipeline, so using this in a lightweight app will hurt.