mdx-editor/editor

A rich text editor React component for markdown

TypeScript

3,691

725 commits

updated Oct 2, 2026

See the code

README

MDXEditor

npm npm bundle size (scoped)

Because markdown editing can be even more delightful.

MDXEditor is an open-source React component that allows users to author markdown documents naturally. Just like in Google docs or Notion. See the live demo that has all features turned on. The component supports the core markdown syntax and certain extensions, including tables, images, code blocks, etc. It also allows users to edit JSX components with a built-in JSX editor or a custom one.

import {MDXEditor, headingsPlugin} from '@mdxeditor/editor';
import '@mdxeditor/editor/style.css';

export default function App() {
  return <MDXEditor markdown={'# Hello World'} plugins={[headingsPlugin()]} />;
}

Get Started

The best place to get started using the component is the documentation.

Help and support

If you find a bug, check if something similar is not reported already in the issues. If not, create a new issue.

If you're integrating the component in your commercial project and need dedicated assistance with your issues in exchange of sponsorship, contact me over email.

If you want to discuss ideas start a discussion in the Discussions section.

License

MIT © Petyo Ivanov.

editor
lexical
markdown
markdown-editor
mdx
react
reactjs
rich-text-editor

mdx-editor/editor

A rich text editor React component for markdown

TypeScript

3,691

725 commits

updated Oct 2, 2026

See the code

README

MDXEditor

npm npm bundle size (scoped)

Because markdown editing can be even more delightful.

MDXEditor is an open-source React component that allows users to author markdown documents naturally. Just like in Google docs or Notion. See the live demo that has all features turned on. The component supports the core markdown syntax and certain extensions, including tables, images, code blocks, etc. It also allows users to edit JSX components with a built-in JSX editor or a custom one.

import {MDXEditor, headingsPlugin} from '@mdxeditor/editor';
import '@mdxeditor/editor/style.css';

export default function App() {
  return <MDXEditor markdown={'# Hello World'} plugins={[headingsPlugin()]} />;
}

Get Started

The best place to get started using the component is the documentation.

Help and support

If you find a bug, check if something similar is not reported already in the issues. If not, create a new issue.

If you're integrating the component in your commercial project and need dedicated assistance with your issues in exchange of sponsorship, contact me over email.

If you want to discuss ideas start a discussion in the Discussions section.

License

MIT © Petyo Ivanov.

editor
lexical
markdown
markdown-editor
mdx
react
reactjs
rich-text-editor

Project health

Latest release

4.3.2 · Oct 4, 2026

Releases this year

20

Significant stargazers

(top 24 of 48)

EGOIST

13,582 followers · starred Sep 2024

Alec Larson

958 followers · starred Feb 2026

CanisMinor

892 followers · starred Feb 2024

Andrey Okonetchnikov

1,089 followers · starred Jul 2023