A simple markdown editor with preview, implemented with React.js and TypeScript. This React Component aims to provide a simple Markdown editor with syntax highlighting support. This is based on textarea encapsulation, so it does not depend on any modern code editors such as Acs, CodeMirror, Monaco etc.

Features

📑 Indent line or selected text by pressing tab key, with customizable indentation.
♻️ Based on textarea encapsulation, does not depend on any modern code editors.
🚧 Does not depend on the uiw component library.
🚘 Automatic list on new lines.
😻 GitHub flavored markdown support.
🌒 Support dark-mode/night-mode @v3.11.0+.
💡 Support next.js, Use examples in next.js.
Line/lines duplication (Ctrl+D) and movement (Alt+UpArrow/DownArrow) @v3.24.0+.

Quick Start

npm i @uiw/react-md-editor

yarn add @uiw/react-md-editor

Using

import React from "react";
import MDEditor from '@uiw/react-md-editor';
export default function App() {
  const [value, setValue] = React.useState("**Hello world!!!**");
  return (
    <div className="container">
      <MDEditor
        value={value}
        onChange={setValue}
      />
      <MDEditor.Markdown source={value} style={{ whiteSpace: 'pre-wrap' }} />
    </div>
  );
}

Headless Mode

The package exposes the necessary utilities to build a headless markdown editor with your own UI. This example creates a simple textarea that supports markdown keyboard shortcuts and correct handling of newlines.

"import React from "react"; import { handleKeyDown, shortcuts, TextAreaCommandOrchestrator, getCommands, } from '@uiw/react-md-editor'; export default function App() { const [value, setValue] = React.useState("**Hello world!!!**"); const textareaRef = React.useRef(null); const orchestratorRef = React.useRef(null); React.useEffect(() => { if (textareaRef.current) { orchestratorRef.current = new TextAreaCommandOrchestrator(textareaRef.current); } }, []); const onKeyDown = (e) => { handleKeyDown(e, 2, false); if (orchestratorRef.current) { shortcuts(e, getCommands(), orchestratorRef.current); } }; return (