Markdown editor

Overview

Live — select text and hit a toolbar button or ⌘B / ⌘I / ⌘K, press Enter inside a list to continue it, then switch to Preview.

Capabilities

Markdown is the source of truth; the toolbar and shortcuts are conveniences over it, and Preview shows the result.

Write modes

Two editing surfaces over the same Markdown value. Write - Markdown is the raw source; Write - Text is a rich-text surface for people who don't know the syntax — click Bold and type, and it's bold immediately, with the DOM serialized back to Markdown on every input. modes picks which tabs are offered (and their order; the first entry is the default view unless defaultMode says otherwise), and modeLabels renames any tab. When only one write mode is offered, its tab is labeled just Write.

Compact

Drop minHeight for a comment-sized input that still carries the full toolbar.

Slash commands

slashCommands wires the Slash Menu component to the textarea — type / at the start of a line (or after a space) for a caret-anchored command list. Built-in commands map straight onto the toolbar's Markdown edits; ↑↓ move, Enter inserts, Esc dismisses. Pass your own SlashCommandGroup[] to customize the set.

Code highlighting

Name a language on the fence and Preview tokenizes the block — comments, strings, keywords, numbers, functions and types, colored with theme tokens so they hold up in dark mode and every preset. Built in for js / ts / jsx / tsx, json, css / scss, html / xml, python, and bash / shell; unknown languages render plain. The tokenizer is also exported as highlightCode(code, lang).

// Tag and publish the current build
export async function release(tag: string) {
  const notes = await collectNotes(tag);
  if (!notes.length) throw new Error("empty changelog");
  return publish({ tag, notes, draft: false });
}

# Verify locally first
npm run build --workspaces
git tag v1.2.0 && git push --tags

Mentions

Pass mentions and typing @ opens a people typeahead in the same caret-anchored popup as slash commands — filtered by name or username, ↑↓ / Enter / Esc, focus stays in the field. Picking inserts @username into the Markdown, and Preview renders any @handle as a mention chip (typed by hand or picked).

Tables

The toolbar's table menu inserts a pipe table from a hover size grid. Click inside any table and reopen the menu to edit it in place: align the current column left / center / right (the separator row's colons), or add and delete rows and columns. The menu stays open across actions, so several column styles can be applied in one visit — and Preview renders the alignment. /table works from the slash menu too.

Images

Drag an image onto the editor, paste one from the clipboard, or pick a file with the toolbar's image button — it lands in the Markdown as  and Preview renders it inline. By default the URL is an inline data URL (self-contained, no server); pass onImageUpload to upload the file and embed the hosted URL instead. An “Uploading…” placeholder holds the spot while the promise resolves and is removed on failure.

Controlled

value / onValueChange and mode / onModeChange make both the Markdown and the mode tabs fully controllable — drive any of the three views from outside or persist drafts as the user types.

Hidden toolbar & read-only

hideToolbarInPreview drops the formatting tools while previewing — the Write / Preview tabs stay so the reader can flip back. Lock the mode from outside (controlled mode with no onModeChange) and the whole bar goes too: a read-only rendered document for viewers who can't edit.

Props

Usage

Keyboard & accessibility

The mode switch is a tablist (arrow keys cycle the offered tabs). Toolbar buttons carry aria-labels, aria-keyshortcuts and native tooltips, and disable while previewing. Shortcuts map to Ctrl on Windows / Linux automatically, in both write modes. The rich-text surface is a labeled multiline textbox; its link dialog opens on ⌘K, applies on Enter and dismisses on Esc. The slash and mention menus are listboxes the textarea controls via aria-activedescendant — focus never leaves the field. The preview emits semantic elements — lists, blockquotes, code — from parsed text only.