Published on

MDX Editor: Open-source Markdown React component

Authors

Ever wondered to provide a simple way to allow your users to write markdown content in your app?

That's where MDX Editor comes in.

It's an open-source React component that you can easily use in your app. And they have a live demo where you can play around with their features.

In a nutshell, they support all the markdown syntax and also provide more features on top of it like:

  • Table editor
  • Frontmatter editor
  • Your own MDX components
  • Markdown shortcuts
  • Customizable toolbar

Dependency

npm install --save @mdxeditor/editor

Snippet

import {MDXEditor} from '@mdxeditor/editor';

export default function App() {
  return (
    <div>
        <MDXEditor 
        markdown="# Hello World" 
        onChange={(markdown) => console.log(markdown)} 
        />
    </div>
  )
}

It does not support server-side rendering and so if you're using it with Next.js framework then you'll need to import it as client-side app properly

import dynamic from 'next/dynamic'

const MDXEditor = dynamic(
  () => import('@mdxeditor/editor').then((mod) => mod.MDXEditor), 
  { ssr: false }
)

You can read their docs to learn more about the editor.

Happy editing markdown!