mdxeditor

MDX Editor brings MDXEditor — a modern, open-source rich Markdown editor — into Drupal as a first-class text editor. Authors write and edit content in Markdown using a familiar toolbar rather than raw HTML or a separate preview pane. The editor renders Markdown in real time directly inside the content field, giving writers a clean, distraction-free experience that still feels native to Drupal's text format system.

Markdown is a lightweight writing format widely used in developer tooling, documentation platforms, and content management systems. This module is ideal for sites where editors are comfortable with Markdown, where content is consumed by both a Drupal front-end and external APIs or static site generators, or where the simplicity and portability of Markdown is preferred over HTML-based editors like CKEditor.

Features

• Rich Markdown editing — Authors see formatted output (bold, headings, lists, links, tables, code blocks) as they type, backed by clean Markdown storage.
• Configurable toolbar — A drag-and-drop toolbar configurator (styled after CKEditor 5) lets site builders choose exactly which buttons appear and in what order, per text format.
• Separator support — Visual dividers between toolbar button groups can be added and positioned freely.
• Plugin architecture — Built-in plugins cover the most common formatting needs (undo/redo, bold/italic/underline, headings, lists, links, tables, code blocks, diff/source view). Third-party modules can register additional MDXEditor plugins using a YAML definition or a PHP attribute class.
• Drupal 11 native — Uses PHP 8 attributes, Drupal's #[Editor] plugin attribute, and hook classes (#[Hook]) throughout. No deprecated APIs.
• Standard editor integration — Works with Drupal's text format system: each format gets its own editor configuration, and drupalSettings carries the configuration to the browser so the JS layer always reflects what was saved in the admin UI.

Post-Installation

After enabling the module:

1. Navigate to Administration → Configuration → Content authoring → Text formats and editors (/admin/config/content/formats).
2. Edit an existing text format or create a new one.
3. Under Text editor, select MDX Editor from the dropdown.
4. Use the drag-and-drop Toolbar configuration panel to arrange buttons. Drag from the Available buttons pool into the Active toolbar row. Add separators from the Button divider chip. Drag active buttons to reorder them or back to the pool to remove them.
5. Enable any additional plugins (quote blocks, thematic breaks, Markdown keyboard shortcuts) in the Additional plugin settings section.
6. Save the format.

The editor will now appear on any text field configured to use that format. Authors select the format from the field's format switcher and the MDXEditor toolbar loads automatically.

No additional content types or configuration entities are created by the module.

Additional Requirements

• Drupal 11 (Drupal 10 is not supported)
• PHP 8.3+
• The Editor core module (drupal/editor) — provides the text editor plugin system
• The compiled JavaScript bundles (js/dist/) are included in releases on drupal.org. For development from the Git repository, Node.js ≥ 24 and npm ≥ 11 are required to build them (npm run build inside the js/ directory).

No external JavaScript CDN dependencies. All MDXEditor JS is bundled into the module's release assets.

Recommended modules/libraries

• AI module — If your site uses the Drupal AI ecosystem, the AI module's field augmentation tools pair naturally with Markdown content fields managed by MDX Editor.
• Filter (Drupal core) — Configure your text format's filter pipeline to match what your front-end Markdown renderer expects (e.g. disable the HTML filter for a format used exclusively with MDX Editor).

Similar projects

• CKEditor 5 Markdown Editor (Drupal core) — The default rich-text editor for Drupal. CKEditor 5 with markdown plugin
• EasyMDE / SimpleMDE — Older CodeMirror-based Markdown editors with a split-pane preview model. MDX Editor renders Markdown inline (no preview pane) using a modern React component with a richer plugin ecosystem.
• Markdown — Provides a Markdown input filter so Markdown stored in plain textareas is rendered as HTML on output. MDX Editor complements this: it provides the authoring experience, while a Markdown filter handles the rendering pipeline.

Supporting this Module

Use the issue queue on drupal.org to report bugs and request features. Contributions via merge request are very welcome — please open an issue first to discuss the approach.

Community Documentation

• MDXEditor upstream documentation

Note that extensive parts of this module were generated via AI coding agents under supervision.