SimpleMarkdownEditor

Plain-text markdown editor with a formatting toolbar, optional rendered preview and word count.

iOSAndroidExpo Go

Preview SimpleMarkdownEditor on your device

Scan with Expo Go

Download Expo Go, then scan the QR code to preview native components.

Installation

pnpm dlx @docyrus/cli add @docyrus/rn-simple-markdown-editor

The web editor wraps the DOM-only overtype library. The native editor is a multiline TextInput with the same props. The toolbar applies markdown to the current selection:

Button	Result
Bold / Italic / Strikethrough / Code	Wraps the selection in `**` / `_` / `~~` / ` (inserts a placeholder when nothing is selected)
Link	`[text](https://)`
Heading / Bulleted list / Numbered list / Quote	Adds or removes `##` / `-` / `1.` / `>` on every selected line

preview renders the markdown with the shared native markdown renderer: true shows it under the input, 'toggle' adds Write / Preview tabs. Live syntax highlighting (overtype's overlay) is not available on native.

Usage

import { SimpleMarkdownEditor } from '@/components/docyrus-native/simple-markdown-editor';

const [value, setValue] = useState('');

<SimpleMarkdownEditor value={value} onValueChange={setValue} preview="toggle" showStats />

<SimpleMarkdownEditor defaultValue="Grows with its content…" autoResize minHeight={80} maxHeight={240} toolbar={false} />

Ref

const editorRef = useRef<SimpleMarkdownEditorRef>(null);

editorRef.current?.insertText('@Alice ');
editorRef.current?.getInput(); // the underlying TextInput

Method	Description
`focus()` / `blur()`	Focus control
`getValue()` / `setValue(value)`	Read / replace the markdown
`insertText(text)`	Insert at the caret, replacing the selection
`getInput()`	Underlying `TextInput` (web: `getTextarea()`)

API Reference

Prop	Type	Default	Description
`ref`	`Ref<SimpleMarkdownEditorRef>`	-	focus / blur / getValue / setValue / insertText / getInput
`value`	`string`	-	Controlled markdown value
`defaultValue`	`string`	-	Uncontrolled initial value
`onValueChange`	`(value: string) => void`	-	Change callback
`variant`	`'default' \| 'muted'`	`'default'`	Visual style
`size`	`'sm' \| 'default' \| 'lg'`	`'default'`	Size (min heights 180 / 240 / 320)
`toolbar`	`boolean`	`true`	Show the formatting toolbar
`showStats`	`boolean`	`false`	Show a words / characters footer
`autoResize`	`boolean`	`false`	Grow with content between minHeight and maxHeight
`minHeight`	`number \| string`	`by size`	Minimum editor height
`maxHeight`	`number \| string \| null`	`null`	Maximum editor height
`lineHeight`	`number`	`1.6`	Line-height multiplier
`fontSize`	`number \| string`	`14 (16 for lg)`	Font size
`placeholder`	`string`	`'Write markdown…'`	Placeholder
`spellcheck`	`boolean`	`false`	Maps to spellCheck + autoCorrect
`resizable`	`boolean`	-	Accepted for web parity — ignored
`inputProps`	`Omit<TextInputProps, 'value' \| 'onChangeText' \| 'multiline' \| 'style'>`	-	Extra TextInput props (web: textareaProps)
`preview`	`boolean \| 'toggle'`	`false`	Rendered preview below the input (true) or Write / Preview tabs (toggle)
`className`	`string`	-	Container classes

Helpers

Export	Description
`wrapMarkdownSelection(value, selection, before, after?, placeholder?)`	Pure wrap transform used by the toolbar
`prefixMarkdownLines(value, selection, prefix \| 'ordered')`	Pure line-prefix toggle used by the toolbar

Type Exports

Type	Description
`SimpleMarkdownEditorProps`	Props
`SimpleMarkdownEditorRef`	Ref handle
`SimpleMarkdownEditorVariant` / `SimpleMarkdownEditorSize`	Variant / size unions
`MarkdownEdit`	`{ value, selection }` result of the helpers

Differences from web

textareaProps is inputProps (React Native TextInputProps).
resizable is accepted and ignored. Use autoResize.
The ref's getTextarea() is getInput().
New preview prop.