@jurieluc/react-markdown-editor

Overview

Most editors force you to choose between a rich-text experience and Markdown storage. @jurieluc/react-markdown-editor gives you both: a familiar, intuitive editing surface that serializes content directly to Markdown — no conversion layer, no hidden HTML blobs.

Features

• WYSIWYG Editing — format content visually without writing raw Markdown syntax
• Clean Markdown Output — every edit produces standard, portable Markdown
• Rich Formatting — headings (H1–H3), bold, italic, underline, blockquotes, dividers
• Lists — ordered and unordered
• Code Support — inline code and fenced code blocks
• Read-Only Viewer — render Markdown as styled HTML with a single prop, no border or toolbar
• Undo / Redo — full edit history
• TypeScript Ready — ships with complete type definitions
• Lightweight — minimal dependencies, zero bloat

Installation

npm install @jurieluc/react-markdown-editor

yarn add @jurieluc/react-markdown-editor

pnpm add @jurieluc/react-markdown-editor

Quick Start

import { useState } from "react";
import { MarkdownEditor } from "@jurieluc/react-markdown-editor";
import "@jurieluc/react-markdown-editor/dist/style.css";

function App() {
  const [content, setContent] = useState("");

  return (
    <MarkdownEditor
      value={content}
      onChange={setContent}
      placeholder="Start writing..."
    />
  );
}

export default App;

Props

| Prop | Type | Required | Default | Description | | ------------- | ------------------------- | :------: | ------- | ----------------------------------------------------------------------- | | value | string | ✓ | — | Controlled Markdown value | | onChange | (value: string) => void | ✓ | — | Callback fired with updated Markdown | | placeholder | string | | — | Placeholder shown on empty editor | | readOnly | boolean | | false | Renders a styled viewer — no toolbar, no border, transparent background | | style | CSSProperties | | — | Styles applied to the wrapper | | editorStyle | CSSProperties | | — | Styles applied to the editable area |

Examples

Fixed Height

<MarkdownEditor
  value={content}
  onChange={setContent}
  editorStyle={{ height: "300px", overflow: "auto" }}
/>

Auto-Grow with Max Height

<MarkdownEditor
  value={content}
  onChange={setContent}
  editorStyle={{
    minHeight: "150px",
    maxHeight: "500px",
    overflow: "auto",
  }}
/>

Custom Typography

<MarkdownEditor
  value={content}
  onChange={setContent}
  editorStyle={{
    fontSize: "14px",
    lineHeight: "1.6",
    padding: "16px",
  }}
/>

Read-Only Viewer

Pass readOnly to render the Markdown as a clean, styled view — no toolbar, no border, transparent background. All content styles (headings, lists, code blocks, blockquotes, etc.) are preserved.

<MarkdownEditor
  value={content}
  onChange={() => {}}
  readOnly
/>

Strip the default padding too for seamless embedding inside cards or layout containers:

<MarkdownEditor
  value={content}
  onChange={() => {}}
  readOnly
  editorStyle={{ padding: "0" }}
/>

A common pattern is toggling between editor and viewer in the same component:

function Post() {
  const [content, setContent] = useState("# Hello\n\nStart editing...");
  const [editing, setEditing] = useState(false);

  return (
    <div>
      <button onClick={() => setEditing((prev) => !prev)}>
        {editing ? "Preview" : "Edit"}
      </button>

      <MarkdownEditor
        value={content}
        onChange={setContent}
        readOnly={!editing}
      />
    </div>
  );
}

Markdown Output

The editor produces standard Markdown compatible with any renderer:

# Heading 1

## Heading 2

**Bold** and *italic* and __underline__

> Blockquote text

- Unordered item
- Another item

1. First step
2. Second step

---

`inline code`

```js
console.log("Hello, world!");
```

Use Cases

• Content Management Systems — give authors a familiar writing interface
• Blogs & Documentation — produce portable, renderer-agnostic content
• Admin Panels — rich input fields that store Markdown instead of HTML
• Note-Taking Apps — fast, keyboard-friendly editing with structured output
• Student & Internal Portals — approachable editing for non-technical users
• Preview Panes — pair an editor and a readOnly viewer side-by-side for a live preview layout

Roadmap

| Feature | Status | | ----------------- | ----------- | | Dark mode | Planned | | Image upload | Planned | | Table support | Planned | | Slash commands | Planned | | Emoji picker | Planned | | Mentions (@) | Planned | | Drag-and-drop | Planned |

Live Demo

Try it in your browser — no install required:

react-markdown-editor-demo.web.app

Author

Juriel Comia

• Portfolio: juriel-comia.web.app
• GitHub: github.com/jurieluc

License

MIT © Juriel Comia

Contributing

Coming soon — contribution guidelines are in progress.