Preview in your theme

Defaults + defaultMode='split' + maxLength={1200} — select text and hit a toolbar button, or ⌘B / ⌘I / ⌘K. Every button is a toggle: while it stays lit, a second click takes the markup back off. Bold, italic, strikethrough, inline code and Link all unwrap the whole span the caret or selection sits inside — no selection needed — so Link hands back the label (or the URL when there is no label).

What's new

Ship fast, stay honest, never ~~guess~~. Read the changelog.

Toolbar acts on the current selection
Preview renders a documented subset
- nested items work too

Select some text
Press ⌘B — press it again to undo the markers

A lit button undoes itself: put the caret inside fast or inside a link — no selection needed — and press ⌘B or ⌘K to unwrap it.

const editor = { toolbar: true, preview: true }

Inline code, a relative doc link, and an image:

kitten

636 / 1200

modes={['edit','preview']} + maxLength={280} — pre-seeded near the cap so the counter is already destructive; type past 280 and Post disables. Posting really appends the rendered comment below.

267 / 280

Markdown is supported.

onUploadRequest — dropping or pasting files inserts one ![uploading… name]() placeholder each and hands the exact strings back; this demo simulates a ~1s upload, then swaps each placeholder for a real image URL. The component never uploads anything itself.

Drop an image here, or paste one from the clipboard.

toolbar={['bold','italic','|','link','code']} + modes={['edit']} + autoResize + tabIndent — the box grows to maxRows={10} then scrolls. tabIndent is off by default because hijacking Tab hurts keyboard navigation; press Escape then Tab to leave the field.

mode='preview' + toolbar={[]} + modes={['preview']} — no header, no textarea: just the renderer. Untrusted source is safe by construction (React elements, never dangerouslySetInnerHTML) and unsafe URL schemes never become links.

Rendered, not executed

A javascript: link renders as inert text — no anchor is created.

Raw HTML like <img src=x onerror="alert(1)"> and <script>alert(1)</script> is escaped, because the renderer builds React elements instead of an HTML string.

Only http(s):, mailto: and relative paths become real links: safe, relative, anchor.

disabled — toolbar and field are inert; the mode switcher still works so the preview stays readable.

readOnly — the text is selectable and copyable, but the toolbar and shortcuts do nothing.

## Locked

Select and copy this, but it won't change.

Loading preview…

This component is part of Pro

The install command, prompt and concept map are included with a Pro license — one purchase unlocks every Pro component, forever.

Unlock with Pro

What's new

Ship fast, stay honest, never ~~guess~~. Read the changelog.

Toolbar acts on the current selection

Preview renders a documented subset

nested items work too

Select some text

Press ⌘B — press it again to undo the markers

A lit button undoes itself: put the caret inside fast or inside a link — no selection needed — and press ⌘B or ⌘K to unwrap it.

const editor = { toolbar: true, preview: true }

Inline code, a relative doc link, and an image:

Rendered, not executed

A javascript: link renders as inert text — no anchor is created.

Raw HTML like <img src=x onerror="alert(1)"> and <script>alert(1)</script> is escaped, because the renderer builds React elements instead of an HTML string.

Only http(s):, mailto: and relative paths become real links: safe, relative, anchor.

Markdown Editor

What's new

Rendered, not executed

What's new

Rendered, not executed