Markdown Editor
A Markdown editor with a formatting toolbar and a preview, plus Markdown Content to show what was written.In a form field, with a limit
Preview
Code
232 of 1000 characters
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/editornpm
npm install @advui/editorUsage
import { MarkdownContent, MarkdownEditor } from '@advui/editor'
<MarkdownEditor aria-label="Report" value={markdown} onValueChange={setMarkdown} />
// Show saved text:
<MarkdownContent>{markdown}</MarkdownContent>Examples
Fewer tools, for comments
Preview
Code
Showing saved text
Preview
Code
Distribution plan
Register households with the village tract leader
Hand out hygiene kits at the monastery
Record every distribution in the 5W form
Keep paper lists digital records only.
API reference
MarkdownEditor
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | The text, as Markdown. |
defaultValue | string | — | Starting `value` when uncontrolled. |
onValueChange | (value: string) => void | — | Called with the new `value`. |
placeholder | string | — | Shown while empty. |
tools | MarkdownTool[] | all nine | Toolbar buttons, in order: 'bold', 'italic', 'strikethrough', 'heading', 'bulletList', 'orderedList', 'quote', 'link', 'code'. |
minHeight | number | SizeTokens | '32' | Height of the text area before it grows. |
maxLength | number | — | Limit, with a character count read as the field’s description. |
invalid | boolean | — | Error styling and `aria-invalid`. |
disabled | boolean | — | Not focusable or editable. |
aria-label | string | — | Names the editor when there is no visible label. A Field sets it for you. |
id | string | — | Links the text area to a Label’s `htmlFor`. A Field sets it for you. |
aria-describedby | string | — | Ids of help or error text. A Field sets it for you. |
labels | Partial<MarkdownEditorLabels> | — | Toolbar, tool, preview and count text, for translation. |
MarkdownContent
Shows Markdown with the same styles. Also takes View props.| Prop | Type | Default | Description |
|---|---|---|---|
children required | string | — | The Markdown. |
headingOffset | number | 1 | Added to heading levels, so `#` is an h2 under the page’s h1. |
Accessibility
- The text area is a normal multi-line field, named by
aria-labelor a Field. - The toolbar is a WAI-ARIA
toolbarwith one tab stop; each tool is a named button (with its shortcut in the tooltip). - After a tool is used, focus returns to the text with the new text selected, so you can keep typing.
- Preview is a toggle button (
aria-pressed); the preview is a named region with real headings and lists. - Links in Markdown Content only follow
http(s)andmailtoaddresses and open in a new tab on web.
| Key | Action |
|---|---|
| ⌘ / Ctrl + B | Bold. |
| ⌘ / Ctrl + I | Italic. |
| ⌘ / Ctrl + K | Link. |
| Tab | Toolbar, Preview, then the text. |
| Arrow keys | Move between tools in the toolbar. |
Responsive behavior
The toolbar wraps on narrow screens.
Platform notes
Web
The value is Markdown, not HTML, so saved text cannot carry scripts. Tools keep the text selected.
iOS
The same editor on a native text field; tools act on the selection.
Android
Same as iOS.