MDX Editor Studio

The real MDXEditor toolbar, 20 plugins and the live-demo doc: edit Markdown, preview and export .md.

MDX Editor Studio — the real MDXEditor toolbar, 20 plugins and the live-demo doc: edit Markdown, preview and export .md.

How to use MDX Editor Studio

  1. Type or paste Markdown in the editor and watch the live preview update
  2. Use the toolbar: bold, italic, underline, headings, lists, quote, link, image and table
  3. Insert a code block, frontmatter, thematic break or admonition directive
  4. Toggle source mode with the DiffSource button, like the repo diff-source plugin
  5. Search inside the document with the search box and jump between matches
  6. Enable the maxLength plugin to cap the document at 500 characters
  7. Copy the Markdown or download it as a .md file, and compare against the sample in Diff

Features

  • Real behaviour from mdx-editor/editor (MIT): the 20 KitchenSinkToolbar actions
  • All 20 real plugins from src/plugins, named and described exactly as in the repo
  • The repo's own live-demo document from docs/live-demo-contents.md, loaded by default
  • Markdown import/export round-trip with live HTML preview and frontmatter support
  • Diff view against the sample document, like the repo diff-source plugin
  • Markdown shortcuts from the repo docs: hash headings, dash lists, quote and code fences

Frequently asked questions

Is it free?

Yes, unlimited.

Login to use this free online tool. Create a free account to get started.