# @mdxeditor/editor

> React component for rich text markdown editing

Latest version **4.2.5** (published 2026-09-13) · MIT license · 962.4K weekly downloads

## Install

```sh
npm install @mdxeditor/editor
pnpm add @mdxeditor/editor
yarn add @mdxeditor/editor
bun add @mdxeditor/editor
```

## Health

**Score 90/100 (A)** — status: active.

Positive: moderate downloads; has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score.

## Facts

| | |
|---|---|
| Version | 4.2.5 |
| Published | 2026-09-13 |
| First published | 2023-06-27 |
| Weekly downloads | 962.4K |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Node | >=16 |
| Dependencies | 57 |
| Unpacked size | 612.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 3687 |
| Author | Petyo Ivanov |
| Maintainers | petyosi |
| Keywords | mdx, markdown, rich-text-editor, lexical, react |

## Links

- npm: https://www.npmjs.com/package/@mdxeditor/editor
- Repository: https://github.com/mdx-editor/editor
- Homepage: https://mdxeditor.dev/
- Issues: https://github.com/mdx-editor/editor/issues
- npm.io page: https://npm.io/package/@mdxeditor/editor

## Dependencies (57)

- [js-yaml](https://npm.io/package/js-yaml.md) 4.3.2
- [lexical](https://npm.io/package/lexical.md) ^0.48.0
- [unidiff](https://npm.io/package/unidiff.md) ^1.0.2
- [downshift](https://npm.io/package/downshift.md) ^7.6.0
- [classnames](https://npm.io/package/classnames.md) ^2.3.2
- [codemirror](https://npm.io/package/codemirror.md) ^6.0.1
- [@lexical/link](https://npm.io/package/@lexical/link.md) ^0.48.0
- [@lexical/list](https://npm.io/package/@lexical/list.md) ^0.48.0
- [@lexical/react](https://npm.io/package/@lexical/react.md) ^0.48.0
- [@lexical/utils](https://npm.io/package/@lexical/utils.md) ^0.48.0
- [mdast-util-mdx](https://npm.io/package/mdast-util-mdx.md) ^3.0.0
- [@mdxeditor/gurx](https://npm.io/package/@mdxeditor/gurx.md) ^1.2.4
- [react-hook-form](https://npm.io/package/react-hook-form.md) ^7.56.1
- [@codemirror/view](https://npm.io/package/@codemirror/view.md) ^6.23.0
- [@lexical/history](https://npm.io/package/@lexical/history.md) ^0.48.0
- [@radix-ui/colors](https://npm.io/package/@radix-ui/colors.md) ^3.0.0
- [@codemirror/merge](https://npm.io/package/@codemirror/merge.md) ^6.4.0
- [@codemirror/state](https://npm.io/package/@codemirror/state.md) ^6.4.0
- [@lexical/markdown](https://npm.io/package/@lexical/markdown.md) ^0.48.0
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) ^0.48.0
- [@lexical/extension](https://npm.io/package/@lexical/extension.md) ^0.48.0
- [@lexical/rich-text](https://npm.io/package/@lexical/rich-text.md) ^0.48.0
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) ^0.48.0
- [mdast-util-mdx-jsx](https://npm.io/package/mdast-util-mdx-jsx.md) ^3.0.0
- [@lexical/plain-text](https://npm.io/package/@lexical/plain-text.md) ^0.48.0
- [@codemirror/commands](https://npm.io/package/@codemirror/commands.md) ^6.2.4
- [mdast-util-directive](https://npm.io/package/mdast-util-directive.md) ^3.0.0
- [mdast-util-gfm-table](https://npm.io/package/mdast-util-gfm-table.md) ^2.0.0
- [@radix-ui/react-icons](https://npm.io/package/@radix-ui/react-icons.md) ^1.3.2
- [cm6-theme-basic-light](https://npm.io/package/cm6-theme-basic-light.md) ^0.2.0
- [micromark-util-symbol](https://npm.io/package/micromark-util-symbol.md) ^2.0.0
- [@radix-ui/react-dialog](https://npm.io/package/@radix-ui/react-dialog.md) ^1.1.11
- [@radix-ui/react-popper](https://npm.io/package/@radix-ui/react-popper.md) ^1.2.4
- [@radix-ui/react-select](https://npm.io/package/@radix-ui/react-select.md) ^2.2.2
- [mdast-util-frontmatter](https://npm.io/package/mdast-util-frontmatter.md) ^2.0.1
- [mdast-util-to-markdown](https://npm.io/package/mdast-util-to-markdown.md) ^2.1.0
- [@radix-ui/react-popover](https://npm.io/package/@radix-ui/react-popover.md) ^1.1.11
- [@radix-ui/react-toolbar](https://npm.io/package/@radix-ui/react-toolbar.md) ^1.1.7
- [@radix-ui/react-tooltip](https://npm.io/package/@radix-ui/react-tooltip.md) ^1.2.4
- [micromark-factory-space](https://npm.io/package/micromark-factory-space.md) ^2.0.0
- [mdast-util-from-markdown](https://npm.io/package/mdast-util-from-markdown.md) ^2.0.0
- [micromark-util-character](https://npm.io/package/micromark-util-character.md) ^2.0.1
- [@codemirror/lang-markdown](https://npm.io/package/@codemirror/lang-markdown.md) ^6.2.3
- [@codemirror/language-data](https://npm.io/package/@codemirror/language-data.md) ^6.5.1
- [mdast-util-highlight-mark](https://npm.io/package/mdast-util-highlight-mark.md) ^1.2.2
- [micromark-extension-mdxjs](https://npm.io/package/micromark-extension-mdxjs.md) ^3.0.0
- [micromark-extension-mdx-md](https://npm.io/package/micromark-extension-mdx-md.md) ^2.0.0
- [micromark-extension-mdx-jsx](https://npm.io/package/micromark-extension-mdx-jsx.md) ^3.0.0
- [@radix-ui/react-toggle-group](https://npm.io/package/@radix-ui/react-toggle-group.md) ^1.1.7
- [mdast-util-gfm-strikethrough](https://npm.io/package/mdast-util-gfm-strikethrough.md) ^2.0.0
- [mdast-util-gfm-task-list-item](https://npm.io/package/mdast-util-gfm-task-list-item.md) ^2.0.0
- [micromark-extension-directive](https://npm.io/package/micromark-extension-directive.md) ^3.0.0
- [micromark-extension-gfm-table](https://npm.io/package/micromark-extension-gfm-table.md) ^2.0.0
- [micromark-extension-frontmatter](https://npm.io/package/micromark-extension-frontmatter.md) ^2.0.0
- [micromark-extension-highlight-mark](https://npm.io/package/micromark-extension-highlight-mark.md) ^1.2.0
- [micromark-extension-gfm-strikethrough](https://npm.io/package/micromark-extension-gfm-strikethrough.md) ^2.0.0
- [micromark-extension-gfm-task-list-item](https://npm.io/package/micromark-extension-gfm-task-list-item.md) ^2.0.1

## Alternatives

- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads
- [@zappar/sharing](https://npm.io/package/@zappar/sharing.md) — 16 weekly downloads

## Recent versions

- 4.2.5 (latest) — 2026-09-13
- 3.0.0-alpha.2 (alpha) — 2024-04-19
- 0.0.6-development (new-icons) — 2023-12-18
- 4.2.4 — 2026-09-09
- 4.2.3 — 2026-08-27
- 4.2.2 — 2026-08-26
- 4.2.1 — 2026-08-21
- 4.2.0 — 2026-08-02
- 4.1.1 — 2026-07-29
- 4.1.0 — 2026-07-19
- 4.0.4 — 2026-06-18
- 4.0.3 — 2026-06-12
- 4.0.2 — 2026-06-03
- 4.0.1 — 2026-05-20
- 4.0.0 — 2026-05-09
- … 275 more at https://npm.io/package/@mdxeditor/editor/versions

## README

# MDXEditor

![npm](https://img.shields.io/npm/v/@mdxeditor/editor)
![npm bundle size (scoped)](https://img.shields.io/bundlephobia/minzip/@mdxeditor/editor)

> 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](https://mdxeditor.dev/editor/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.

```jsx
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](https://mdxeditor.dev/editor/docs/getting-started).

## Help and support

If you find a bug, check if something similar is not reported already in the [issues](https://github.com/mdx-editor/editor/issues). If not, [create a new issue](https://github.com/mdx-editor/editor/issues/new?assignees=&labels=bug&projects=&template=1.bug.md&title=%5BBUG%5D).

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](mailto:petyo@mdxeditor.dev).

If you want to discuss ideas start a discussion in the [Discussions](https://github.com/mdx-editor/editor/discussions) section.

## License

MIT &copy; Petyo Ivanov.

---
_Source: https://npm.io/package/@mdxeditor/editor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._