React bindings · v0.3.2 · MIT

A React editor that stores Markdown.

<MarkdownEditor /> (controlled or uncontrolled), <MarkdownView /> that renders as real React elements and works in Server Components, and hooks. Built on advanced-texteditor-md.

$npm install react-advanced-texteditor-md

npmv0.3.2
wrapper5.7 kB gzip
server view4.4 kB gzip
react17 to 19
licenseMIT

Playground#

The real <MarkdownEditor />, controlled, with every layout, theme and mode. Type @ to mention someone, / for blocks. The output tabs show what is stored, the HTML, the same Markdown through MarkdownView, and the JSX you would write.

A React editor

Write rich text, store Markdown. Mention @Ada LovelaceStaff from staff, or @Alan TuringGuest who is a guest.

==Highlighted text== comes from a plugin, H~2~O and x^2^ from another, press [[Ctrl]] [[K]] for a link.

::: tip Callouts are a block syntax: ::: tip ... :::. :::

Inline math $E = mc^2$ and a block:

\int_0^1 x^2\,dx = \frac{1}{3}

export const Comment = () => <MarkdownEditor value={md} onChange={setMd} />;

Feature	Status
Controlled	yes
Server rendering	yes

Mentions
Your idea

0 words, 0 characters

# A React editor

Write **rich text**, *store* Markdown. Mention [@Ada Lovelace](mention:staff/u01?legacy=100) from staff, or [@Alan Turing](mention:guest/u02?legacy=101) who is a guest.

==Highlighted text== comes from a plugin, H~2~O and x^2^ from another, press [[Ctrl]] [[K]] for a link.

::: tip
Callouts are a block syntax: `::: tip` ... `:::`.
:::

![Quarterly results|center|360](/react-advanced-texteditor-md/sample.svg "Q1 to Q3")

Inline math $E = mc^2$ and a block:

$$
\int_0^1 x^2\,dx = \frac{1}{3}
$$

```tsx
export const Comment = () => <MarkdownEditor value={md} onChange={setMd} />;
```

| Feature | Status |
| :------ | -----: |
| Controlled | yes |
| Server rendering | yes |

- [x] Mentions
- [ ] Your idea

What you get#

Correct React semantics on top of a small, dependency-free editor.

Real React semantics
The editor is created in an effect and destroyed in its cleanup (StrictMode-safe), updated in place where the core allows it, and recreated only when a structural option changes.
Controlled or uncontrolled
Own the string with value and onChange, or give it a defaultValue and read it through a ref that is the core's full editor API.
MarkdownView
Renders Markdown as real React elements, with no dangerouslySetInnerHTML for your text. Each block is memoised, so editing one paragraph re-renders one paragraph.
Server Components
react-advanced-texteditor-md/view has no hooks, so a Server Component can render it, and it ships no editor code to the browser.
Three hooks
useMarkdownEditor for headless layouts, useEditorState to read editor state, and useEditorValue for the current Markdown.
No memoising needed
Options are compared by value, so inline plugins and objects are fine, and callbacks may change identity on every render: the latest one is always called.
Six layouts, five themes
Classic, minimal, bubble, bottom-bar, split and document, in light, dark, sepia, slate and high contrast. A theme or token change applies in place.
Mentions, uploads, plugins
Everything in the core editor: mentions with badges and colours, uploads with allow and deny lists, math, highlighting, embeds and syntax of your own.
Comment boxes
The bottom-bar layout has an actions slot. React children are portalled into it, so state, context and events just work.
Tailwind v4
An optional bridge maps the editor's variables onto Tailwind theme tokens, and every slot takes utilities through classNames.
Safe by default
Raw HTML in Markdown is never interpreted, unsafe URLs are refused by the same link policy as the core, and a test runs a list of payloads through it.
Small wrapper
About 5.4 kB gzip, the renderer another 4.3 kB. The editor itself is the core's separate, lazily loaded download. React 17 or newer.

Demos, live#

Each card is a real component with the exact source beside it: the code panel is the demo's own file, read at build time, so it cannot drift from what runs.

Controlled

You own the string. onChange fires for edits the user makes, never for value updates, so state echoing back cannot loop and undo keeps working.

Controlled

React state owns this string. Edit here and watch it below.

no memoising needed
your idea

## Controlled

React state owns this string. Edit here and watch it below.

- [x] no memoising needed
- [ ] your idea

src/demos/controlled.tsx

"use client";import { useState } from "react";import { MarkdownEditor } from "react-advanced-texteditor-md";
// The stylesheet is imported once for the whole app (see app/globals.css)://   @import "advanced-texteditor-md/style.css";
export function ControlledDemo() {  const [markdown, setMarkdown] = useState(    "## Controlled\n\nReact state owns this string. Edit here and watch it below.\n\n- [x] no memoising needed\n- [ ] your idea",  );  return (    <>      <MarkdownEditor value={markdown} onChange={setMarkdown} layout="minimal" minHeight={140} maxHeight={260} aria-label="Controlled editor" />      <pre className="out" data-testid="controlled-out" role="region" tabIndex={0} aria-label="The state, as Markdown">        {markdown}      </pre>      <div className="controls">        <button type="button" className="btn btn--sm" onClick={() => setMarkdown("# Set from state\n\nThe editor took the new value without losing its undo history.")}>          Set from state        </button>      </div>    </>  );}

Uncontrolled, with a ref

Give it a defaultValue and let it own the document. The ref is the core's full editor API, as one object that never changes identity.

Uncontrolled: the editor owns the document.

Read it back through the ref.

getValue() will appear here

src/demos/uncontrolled.tsx

"use client";import { useRef, useState } from "react";import { MarkdownEditor, type EditorInstance } from "react-advanced-texteditor-md";
export function UncontrolledDemo() {  // The ref is the core's full EditorInstance: one stable object, safe to call before mount and after unmount.  const ref = useRef<EditorInstance>(null);  const [saved, setSaved] = useState("");  return (    <>      <MarkdownEditor ref={ref} defaultValue={"Uncontrolled: the editor owns the document.\n\nRead it back through the **ref**."} layout="minimal" minHeight={110} maxHeight={220} aria-label="Uncontrolled editor" />      <div className="controls">        <button type="button" className="btn btn--sm" onClick={() => setSaved(ref.current?.getValue() ?? "")}>          Read value        </button>        <button type="button" className="btn btn--sm" onClick={() => (ref.current?.focus(), ref.current?.insertMarkdown("**bold** "))}>          Insert bold        </button>        <button type="button" className="btn btn--sm" onClick={() => ref.current?.setValue("")}>          Clear        </button>      </div>      <pre className="out" data-testid="uncontrolled-out" role="region" tabIndex={0} aria-label="What getValue returned">        {saved || "getValue() will appear here"}      </pre>    </>  );}

MarkdownView

Renders Markdown as React elements, not an HTML string. Each block is memoised, so editing one paragraph re-renders one paragraph.

Live preview

Type here. The block below is a MarkdownView, re-rendering only the blocks that changed.

Quotes, code, tables and math work too: $a^2 + b^2 = c^2$ .

Live preview

Type here. The block below is a MarkdownView, re-rendering only the blocks that changed.

Quotes, code, tables and math work too: $a^2 + b^2 = c^2$ .

src/demos/view.tsx

"use client";import { useState } from "react";import { MarkdownEditor, MarkdownView } from "react-advanced-texteditor-md";
// MarkdownView builds React elements from the same parser the editor uses: no dangerouslySetInnerHTML for your text.export function ViewDemo() {  const [md, setMd] = useState("## Live preview\n\nType here. The block below is a **MarkdownView**, re-rendering only the blocks that changed.\n\n> Quotes, `code`, tables and math work too: $a^2 + b^2 = c^2$.");  return (    <>      <MarkdownEditor defaultValue={md} onChange={setMd} layout="minimal" minHeight={110} maxHeight={200} aria-label="Source" />      <div className="viewbox" data-testid="view-out">        <MarkdownView markdown={md} />      </div>    </>  );}

Server rendering

react-advanced-texteditor-md/view has no hooks, so a Server Component can render it. This block was rendered once, at build time, and ships no editor code.

Rendered on the server

MarkdownView from react-advanced-texteditor-md/view has no hooks and no effects, so a Server Component can render it. It ships no editor code to the browser.

Mentions render as chips: @Ada LovelaceStaff and @Alan TuringGuest
Code is highlighted by the core's highlighter, on the server:

export const add = (a: number, b: number): number => a + b; // 0 kB of JS for this block

Rendered at build time: 2026-10-02T23:29:07.388Z

src/demos/server-view.tsx

// A Server Component: no "use client", no hooks. In this static export it ran once, at build time.import { MarkdownView } from "react-advanced-texteditor-md/view";import { createHighlighter } from "advanced-texteditor-md";import { typescript } from "advanced-texteditor-md/highlight/typescript";
const highlighter = createHighlighter([typescript]);
const POST = `## Rendered on the server
\`MarkdownView\` from \`react-advanced-texteditor-md/view\` has no hooks and no effects, so a Server Component can render it.It ships **no editor code** to the browser.
- Mentions render as chips: [@Ada Lovelace](mention:staff/u01) and [@Alan Turing](mention:guest/u02)- Code is highlighted by the core's highlighter, on the server:
\`\`\`tsexport const add = (a: number, b: number): number => a + b; // 0 kB of JS for this block\`\`\``;
export function ServerViewDemo() {  const builtAt = new Date().toISOString();  return (    <>      <div className="viewbox">        <MarkdownView          markdown={POST}          highlight={highlighter}          chips={[{ scheme: "mention", kinds: { staff: { color: 3, label: "Staff" }, guest: { color: 6, label: "Guest" } } }]}        />      </div>      <p className="fcard__hint" data-testid="built-at">        Rendered at build time: <time dateTime={builtAt}>{builtAt}</time>      </p>    </>  );}

useMarkdownEditor (headless)

For layouts the component does not give you: attach the ref where the editor should mount and draw everything else yourself.

0 words (empty)wysiwygmarkdownsplit

src/demos/headless.tsx

"use client";import { useMarkdownEditor } from "react-advanced-texteditor-md";
// The headless hook: you draw everything around the editor, it mounts into the element you attach `ref` to.export function HeadlessDemo() {  const { ref, mode, setMode, stats, isEmpty } = useMarkdownEditor({    defaultValue: "The editor mounts into the `div` below. The footer is plain React.",    layout: "minimal",    minHeight: 100,    maxHeight: 200,  });  return (    <>      <div ref={ref} />      <div className="statusrow" data-testid="headless-footer">        <span>          {stats.words} words{isEmpty ? " (empty)" : ""}        </span>        <span className="seg" role="group" aria-label="Mode">          {(["wysiwyg", "markdown", "split"] as const).map((m) => (            <label key={m}>              <input type="radio" name="headless-mode" checked={mode === m} onChange={() => setMode(m)} />              <span>{m}</span>            </label>          ))}        </span>      </div>    </>  );}

Mentions with badges and colours

Type @. Each kind gets a colour and a badge; the stored form is [@Name](mention:kind/id?refs).

Ping @Ada LovelaceStaff and type @ for more.

Mentioned: u01

src/demos/mentions.tsx

"use client";import { useState } from "react";import { MarkdownEditor } from "react-advanced-texteditor-md";import { searchPeople } from "@/lib/people"; // a fake directory; yours would call your API
export function MentionsDemo() {  const [ids, setIds] = useState<string[]>(["u01"]);  return (    <>      <MarkdownEditor        defaultValue="Ping [@Ada Lovelace](mention:staff/u01?legacy=100) and type @ for more."        layout="minimal"        minHeight={100}        maxHeight={200}        aria-label="Mentions"        mentions={{ trigger: "@", search: searchPeople, groupBy: (p) => p.badge }}        chips={[{ scheme: "mention", kinds: { staff: { color: 3, label: "Staff" }, guest: { color: 6, label: "Guest" } } }]}        onMentionsChange={(chips) => setIds(chips.map((c) => c.id))}      />      <p className="fcard__hint" data-testid="mention-ids">        Mentioned: {ids.length ? ids.join(", ") : "nobody yet"}      </p>    </>  );}

Uploads with allow and deny lists

Files are validated (size, count, extension, MIME) before the handler runs. Nothing leaves the page here: the uploader stores files in memory.

Drop a file here, or use the buttons below.

src/demos/uploads.tsx

"use client";import { useRef, useState } from "react";import { MarkdownEditor, type EditorInstance } from "react-advanced-texteditor-md";
// A fake uploader that "stores" the file in memory and reports progress. Use createPutUploader (and friends) from// "advanced-texteditor-md/uploaders" against a real endpoint.function fakeUpload(file: File, { signal, onProgress }: { signal: AbortSignal; onProgress: (p: number) => void }) {  return new Promise<{ url: string; name: string }>((resolve, reject) => {    let p = 0;    const timer = setInterval(() => {      p = Math.min(1, p + 0.2);      onProgress(p);      if (p >= 1) {        clearInterval(timer);        resolve({ url: URL.createObjectURL(file), name: file.name });      }    }, 90);    signal.addEventListener("abort", () => {      clearInterval(timer);      reject(new DOMException("Upload aborted", "AbortError"));    });  });}
export function UploadsDemo() {  const ref = useRef<EditorInstance>(null);  const [log, setLog] = useState<string[]>([]);  const png = () => new File([Uint8Array.from(atob("iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="), (c) => c.charCodeAt(0))], "photo.png", { type: "image/png" });  return (    <>      <MarkdownEditor        ref={ref}        defaultValue="Drop a file here, or use the buttons below."        layout="minimal"        minHeight={90}        maxHeight={180}        aria-label="Uploads"        upload={{          handler: fakeUpload,          allowExtensions: ["png", "jpg", "pdf"], // allow-list          denyExtensions: ["exe", "svg"], // the deny list always wins          maxFileSizeBytes: 1024 * 1024,          urls: { allowedSchemes: ["http", "https", "blob"] },        }}        onUpload={(e) => setLog((l) => [`${e.type}: ${e.file.name}${e.type === "rejected" ? ` (${e.reason})` : ""}`, ...l].slice(0, 5))}      />      <div className="controls">        <button type="button" className="btn btn--sm" onClick={() => ref.current?.uploadFiles([png()])}>          Upload photo.png        </button>        <button type="button" className="btn btn--sm" onClick={() => ref.current?.uploadFiles([new File(["MZ"], "setup.exe")])}>          Upload setup.exe        </button>        <button type="button" className="btn btn--sm" onClick={() => ref.current?.uploadFiles([new File([new Uint8Array(3 * 1024 * 1024)], "scan.pdf", { type: "application/pdf" })])}>          Upload scan.pdf (3 MB)        </button>      </div>      <ul className="log" aria-live="polite" aria-label="Upload events" data-testid="upload-log">        {log.map((l, i) => (          <li key={i}>{l}</li>        ))}      </ul>    </>  );}

Plugins and custom syntax

Ready-made plugins from the core, one written in a few lines, and an inline syntax of your own (||spoiler||).

==Highlighted== text, H~2~O and x^2^, press [[Ctrl]] [[K]].

A spoiler from custom syntax.

::: tip A callout is a block syntax from a plugin. :::

src/demos/plugins.tsx

"use client";import { MarkdownEditor, definePlugin, defineInlineSyntax } from "react-advanced-texteditor-md";import { highlightMark, callout, kbd, subSup } from "advanced-texteditor-md/plugins";
// Define plugins and syntaxes at module scope. (Inline is fine too: options are compared by value.)const insertToday = (ed: { insertText(text: string): void }) => ed.insertText(new Date().toISOString().slice(0, 10));
const today = definePlugin({  name: "today",  toolbar: [{ id: "today", label: "Insert today's date", icon: "📅", command: (ed) => (insertToday(ed), true) }],  slash: [{ id: "today", label: "Today's date", keywords: ["date"], run: insertToday }],});
// ||text|| becomes <span class="spoiler">; style .spoiler in your CSS.const spoiler = defineInlineSyntax({ name: "spoiler", open: "||", tag: "span", className: "spoiler" });
export function PluginsDemo() {  return (    <MarkdownEditor      defaultValue={"==Highlighted== text, H~2~O and x^2^, press [[Ctrl]] [[K]].\n\nA ||spoiler|| from custom syntax.\n\n::: tip\nA callout is a block syntax from a plugin.\n:::"}      layout="minimal"      minHeight={140}      maxHeight={260}      aria-label="Plugins"      plugins={[highlightMark, callout, kbd, subSup, today]}      syntax={{ inline: [spoiler] }}    />  );}

Theming

Five themes through data-atm-theme, or tokens through the theme prop. Both change in place: the editor is not rebuilt.

Theme

Custom tokens

Accent

Theming

Pick a theme, or turn on custom tokens and change the accent. Mention @Ada too.

src/demos/theming.tsx

"use client";import { useState } from "react";import { MarkdownEditor } from "react-advanced-texteditor-md";
const THEMES = ["light", "dark", "sepia", "slate", "contrast"] as const;
export function ThemingDemo() {  const [preset, setPreset] = useState<(typeof THEMES)[number]>("sepia");  const [accent, setAccent] = useState("#0e7490");  const [custom, setCustom] = useState(false);  return (    <>      <div className="controls">        <div className="field">          <label htmlFor="theming-preset">Theme</label>          <select id="theming-preset" value={preset} onChange={(e) => setPreset(e.target.value as (typeof THEMES)[number])}>            {THEMES.map((t) => (              <option key={t}>{t}</option>            ))}          </select>        </div>        <label className="check">          <input type="checkbox" checked={custom} onChange={(e) => setCustom(e.target.checked)} /> Custom tokens        </label>        <div className="field">          <label htmlFor="theming-accent">Accent</label>          <input id="theming-accent" type="color" value={accent} onChange={(e) => setAccent(e.target.value)} />        </div>      </div>      {/* The extra themes are picked by data-atm-theme on any ancestor. With `theme` omitted the editor follows it. */}      <div data-atm-theme={preset}>        {/* `theme` takes "light" | "dark" | "auto" or tokens, and changes in place: the caret and undo history survive. */}        <MarkdownEditor          defaultValue={"## Theming\n\nPick a theme, or turn on **custom tokens** and change the accent. Mention [@Ada](mention:staff/u01) too."}          layout="minimal"          minHeight={120}          maxHeight={220}          aria-label="Theming"          theme={custom ? { accent, radius: "14px", palette: ["#e11d48", "#0d9488", accent] } : undefined}        />      </div>    </>  );}

Tailwind v4

The core's bridge maps the editor's variables onto theme tokens, and every slot takes utilities through classNames. This card is styled that way.

Utility classes

Every slot takes Tailwind classes through classNames, and bg-atm-surface, text-atm-fg and friends follow the editor's theme.

src/demos/tailwind.tsx

"use client";import { MarkdownEditor } from "react-advanced-texteditor-md";
// app/globals.css://   @import "tailwindcss";//   @import "advanced-texteditor-md/style.css";      <- add `layer(components)` if a utility below does not win//   @import "advanced-texteditor-md/tailwind.css";   <- maps --atm-* onto bg-atm-surface, text-atm-fg, border-atm-border, ...export function TailwindDemo() {  return (    <MarkdownEditor      className="max-w-2xl"      classNames={{        root: "rounded-2xl border-2 border-atm-accent shadow-lg",        toolbar: "bg-atm-surface",        surface: "min-h-32 text-atm-fg",        chip: "font-semibold",      }}      layout="classic"      defaultValue={"## Utility classes\n\nEvery slot takes Tailwind classes through `classNames`, and `bg-atm-surface`, `text-atm-fg` and friends follow the editor's theme."}      minHeight={140}      maxHeight={240}      aria-label="Tailwind"    />  );}

Comment box

The bottom-bar layout has an actions slot. React children are portalled into it, so state, context and events just work.

First! Markdown works here too.

src/demos/comment-box.tsx

"use client";import { useRef, useState } from "react";import { MarkdownEditor, MarkdownView, type EditorInstance } from "react-advanced-texteditor-md";
// The bottom-bar layout has an `actions` slot. Children are portalled into it, so they are ordinary React.export function CommentBoxDemo() {  const ref = useRef<EditorInstance>(null);  const [comments, setComments] = useState<string[]>(["First! Markdown works **here** too."]);  const send = (md: string) => {    if (!md.trim()) return;    setComments((c) => [...c, md]);    ref.current?.setValue("");  };  return (    <>      <ul className="comments" data-testid="comments">        {comments.map((c, i) => (          <li key={i}>            <MarkdownView markdown={c} />          </li>        ))}      </ul>      <MarkdownEditor ref={ref} layout="bottom-bar" placeholder="Reply... (Ctrl or Cmd + Enter sends)" minHeight={72} maxHeight={160} aria-label="Reply" onSubmit={send}>        <button type="button" className="btn btn--primary btn--sm" onClick={() => send(ref.current?.getValue() ?? "")}>          Send        </button>      </MarkdownEditor>    </>  );}

Install#

advanced-texteditor-md is a regular dependency and installs with it. react and react-dom (17 or newer) are peer dependencies.

Add it

The stylesheet is not bundled into this package, so it is never shipped twice: import the core's once.

$npm install react-advanced-texteditor-md

Vite, or any bundler

Import the stylesheet once, anywhere.

comment.tsx

import { useState } from "react";import { MarkdownEditor } from "react-advanced-texteditor-md";import "advanced-texteditor-md/style.css"; // the editor's stylesheet: import it once, anywhere
export function Comment() {  const [markdown, setMarkdown] = useState("# Hello\n\nWrite **Markdown** visually.");  return <MarkdownEditor value={markdown} onChange={setMarkdown} placeholder="Write something..." minHeight={160} />;}

next-app-router.tsx

// app/page.tsx  (a Server Component: no "use client" needed here)import { MarkdownView } from "react-advanced-texteditor-md/view"; // server-safe rendererimport { Composer } from "./composer";
export default async function Page() {  const post = await loadPost();  return (    <>      <MarkdownView markdown={post.body} />      <Composer initial={post.draft} />    </>  );}
// app/composer.tsx"use client"; // handlers are functions, so the component that passes them is a Client Componentimport { useState } from "react";import { MarkdownEditor } from "react-advanced-texteditor-md";
export function Composer({ initial }: { initial: string }) {  const [md, setMd] = useState(initial);  return <MarkdownEditor value={md} onChange={setMd} />;}

Keyboard shortcuts#

Mod is Cmd on macOS and Ctrl elsewhere. They are the core editor's, so every binding can be overridden with keymap.

Text

Bold: ModB
Italic: ModI
Strikethrough: ModShiftX
Inline code: ModE
Link: ModK
Clear formatting: Mod\

Blocks

Heading 1 to 6: ModAlt1…6
Paragraph: ModAlt0
Bulleted list: ModShift8
Numbered list: ModShift7
Task list: ModShiftL
Quote: ModShift9
Code block: ModAltC
Math block: ModShiftM

Everything else

Undo: ModZ
Redo: ModShiftZ
Mention: @
Slash menu: /
Find (plugin): ModF
Block handle: AltShiftH
Move a block: Alt↑ / ↓
Image toolbar: AltF10
Submit (bottom-bar): ModEnter

Size and how it compares#

The wrapper is small because the editor is the core's separate, lazily loaded download.

Size of each piece
Piece	Gzip	Budget
`react-advanced-texteditor-md` (editor, hooks, client MarkdownView)	5.5 kB	6 kB
`react-advanced-texteditor-md/view` (server-safe renderer)	4.3 kB	5 kB
The core's editor entry that the wrapper loads	about 62 kB, with more chunks on first use	The core's budget

Measured 2026-10-02 (gzip -9, npm run size, which excludes the core). For the whole editor against Tiptap, Lexical and Milkdown, with the method and versions, see the core's comparison: the initial JavaScript of a Markdown-holding editor was 62.4 kB gzip here against 139.4 kB (Tiptap), 137.3 kB (Lexical) and 137.0 kB (Milkdown), the others being headless toolkits. Those libraries also have React bindings of their own and capabilities this one lacks (real-time collaboration, a larger ecosystem, a longer track record); we did not measure rendering speed or editing quality and make no claim about them.

Browser and React support#

The wrapper adds no browser requirement of its own: it needs what the core editor needs, and React 17 or newer.

Support matrix
What	Tested how
Chromium, desktop and a Pixel 7 emulation	Playwright against the example app and this site, in CI
React 19	The unit, integration, SSR and hydration suites, and both apps
React 17 and 18	Designed for (a stand-in replaces `useSyncExternalStore` on 17); not in the CI matrix
Firefox, WebKit	Covered by the core's own Playwright suite, not re-run here
Node 20, 22, 24	CI matrix: typecheck, tests, build, size
Real iOS and Android devices	Not run

Roadmap and known gaps#

An honest list, taken from the README.

Known gap
Depends on a published core. advanced-texteditor-md is a regular dependency, so this package cannot be installed from the registry until the core is.
Known gap
Controlled mode and a rejected change. React gives the component no signal when a parent refuses an update, so call ref.current.setValue(previous) yourself.
Limit
Structural options recreate the editor. Changing layout, plugins or syntax recreates the editor, and the undo history does not survive that. The Markdown, mode and focus do.
Limit
React 17 and 18. Supported by design but not exercised in CI; only React 19 is.
Known gap
Tailwind preflight. It removes list markers unless you add the three CSS lines shown in the README (a core stylesheet matter).
Out of scope
Everything the core lacks. Collaborative editing, comments and suggestions and nested block drag-and-drop are not planned for 0.x. The core's roadmap applies here too.
Pre-1.0
The API can still change. Between minor versions. The changelog says what moved.

FAQ#

Can the emoji button open the OS emoji panel?

No: a web page cannot open it. The button focuses the editor and shows the shortcut (macOS Ctrl Cmd Space, Windows Win ., Linux Ctrl .); the characters then arrive as normal text.

To use your own picker pass emoji: { open: (editor) => ... }, or emoji: false to remove the button. No emoji data ships in the package.

Do I need useMemo or useCallback for props?

No. Options are compared by value, so inline objects and plugins are fine, and callbacks may change identity on every render.

Why did the editor lose my undo history?

A structural option (layout, plugins, ...) changed and the editor was recreated. The Markdown, mode and focus are kept, the history is not. Changing value, theme, readOnly or mode never does that.

onChange does not fire when I call setValue

By design, and it is the core's contract: onChange is for user edits, so setting a value from state can never loop.

Can I use it in a Server Component?

react-advanced-texteditor-md/view has no hooks and no directive, so render MarkdownView anywhere. The editor itself is a client component: import it from the main entry and use it as a leaf.

Which React versions?

17 and newer. Hydration with the static copy and useSyncExternalStore are designed for 18 and 19; on 17 a built-in stand-in replaces useSyncExternalStore. StrictMode and the React Compiler are fine.

Where is the CSS?

In the core: advanced-texteditor-md/style.css. It is never bundled into this package, so it is never shipped twice.

Does the library collect any data?

No. It makes no network request on its own, loads no script and sends no telemetry. This demo site counts visits with a cookieless service and uses Google Analytics only if you accept; see the Privacy page.

Playground#

A React editor

What you get#

Real React semantics

Controlled or uncontrolled

MarkdownView

Server Components

Three hooks

No memoising needed

Six layouts, five themes

Mentions, uploads, plugins

Comment boxes

Tailwind v4

Safe by default

Small wrapper

Demos, live#

Controlled

Controlled

Uncontrolled, with a ref

MarkdownView

Live preview

Live preview

Server rendering

Rendered on the server

useMarkdownEditor (headless)

Mentions with badges and colours

Uploads with allow and deny lists

Plugins and custom syntax

Theming

Theming

Tailwind v4

Utility classes

Comment box

Install#

Add it

Vite, or any bundler

Keyboard shortcuts#

Text

Blocks

Everything else

Size and how it compares#

Browser and React support#

Roadmap and known gaps#

FAQ#