React Markdown editor

Rich editing that stores plain Markdown.

npm install @react-markdown-kit/editor

'use client'

import { MarkdownEditor } from '@react-markdown-kit/editor'

<MarkdownEditor value={value} onChange={setValue} />

Markdown in, Markdown out​

Your application keeps storing Markdown strings. Nothing asks you to persist editor JSON or a proprietary format, so the same content still works with every other Markdown tool you use.

The round trip is the hard part​

Most Markdown editors quietly damage documents. Opening a file and closing it without typing anything rewrites parts of it, and the damage compounds on every save.

This editor converts between a real CommonMark syntax tree and the editing model, then writes unchanged blocks back from their original source bytes. Opening a document and closing it changes nothing.

The test corpus comes from an audit of a previous editor that had seven reproducible corruption bugs. All 22 cases now round-trip byte for byte.

Three modes​

rich for WYSIWYG, source for the raw Markdown, preview for read-only output. Preview delegates to @react-markdown-kit/renderer, so what you preview is exactly what your application will render.

Build your own interface​

The default editor ships a toolbar so it is useful immediately. When you need your own, drop to the headless API and keep the engine.

const editor = useMarkdownEditor({ value, onChange })

<MarkdownEditorProvider editor={editor}>
  <MyToolbar />
  <MarkdownEditorContent />
</MarkdownEditorProvider>

No Lexical type appears in the public types, so your components never import the engine.

Styling​

Zero styling dependencies. The editor is fully functional with no stylesheet loaded, and a test asserts it. Its chrome takes your class names, and its icons are inline SVG with no icon package.

Next​

Editor docs · Just rendering · See it with templates, in the editor demo