Free Online Markdown Editor for React

Install the editor and the two plugins this demo uses

npm install @react-markdown-kit/editor @react-markdown-kit/renderer

npm install @react-markdown-kit/template @react-markdown-kit/mermaid

The editor needs the renderer for its preview mode and its parser. The template and Mermaid packages are optional plugins, so you only need them if you want variables or diagrams.

Edit Markdown in three steps

1. Mount the editor. It takes Markdown and gives you Markdown back, so your app keeps storing plain strings, and opening and closing a document doesn’t change it. The stylesheet is optional (the editor works without it).

   'use client'
   
   import { useState } from 'react'
   import { MarkdownEditor } from '@react-markdown-kit/editor'
   import '@react-markdown-kit/editor/styles.css'
   
   export function Notes() {
     const [value, setValue] = useState('# Notes\n\nStart writing.')
     return <MarkdownEditor value={value} onChange={setValue} />
   }

   Copy
2. Share a dialect. Define your Markdown features once in a preset and pass it to both the editor and the renderer. A ```mermaid fence becomes a canvas in the editor and static SVG in the renderer.

   import { defineMarkdownPreset, gfm } from '@react-markdown-kit/renderer'
   import { MarkdownEditor } from '@react-markdown-kit/editor'
   import { mermaid } from '@react-markdown-kit/mermaid/editor'
   
   export const preset = defineMarkdownPreset({ extensions: [gfm(), mermaid()] })
   
   <MarkdownEditor preset={preset} value={value} onChange={setValue} />

   Copy
3. Add variables. The template plugin shows placeholders as chips while you write and resolves them when rendering. Values go into the parsed tree, which means data can’t inject Markdown.

   import Markdown from '@react-markdown-kit/renderer'
   import { MarkdownEditor } from '@react-markdown-kit/editor'
   import { template } from '@react-markdown-kit/template'
   import { templateVariables } from '@react-markdown-kit/template/editor'
   
   // Authoring: every {{placeholder}} is a chip that previews the sample data.
   <MarkdownEditor
     preset={preset}
     extensions={[templateVariables({ previewData: customer })]}
     value={source}
     onChange={setSource}
   />
   
   // Rendering: the same source, resolved for one customer.
   <Markdown preset={preset} extensions={[template({ data: customer })]}>
     {source}
   </Markdown>

   Copy

About this editor

• The sample is a customer report, written once and resolved for one account. If you edit the template on the left, the right pane updates, since you changed the document and the data stayed the same. What gets saved is the placeholder. The chip only previews the value.
• You can edit the flowchart in place. If you drag a box, the saved Markdown is still plain Mermaid with one layout comment, and the placeholders around it aren’t touched. The Mermaid editor shows the same thing on its own.
• “Copy link” compresses the whole document into the URL hash and gives you the link. Nothing is uploaded and there’s no account involved. Opening the link loads the document back into the editor.
• If you only install the renderer, you don’t pull in any editor code or Lexical. The template and Mermaid root entries don’t call React either, so the same resolution can run in a worker, a CLI or an email job. The security model covers what to watch for when you mix authored text with runtime data.