Markdown editor

A focused editor with simple formatting helpers and a lightweight preview for basic markdown.

Examples

Editor and preview

Write clear notes with lightweight code previews.

Overview

Markdown editor manages shared text for its toolbar, input, and preview. The default toolbar wraps the current selection in bold, italic, or code markers. Preview intentionally supports only **bold**, *italic*, and `code`.

tsx

import {
  MarkdownEditor,
  MarkdownEditorToolbar,
  MarkdownEditorInput,
  MarkdownEditorPreview,
} from "@standard-ui/react"

<MarkdownEditor defaultValue="Hello **world**">
  <MarkdownEditorToolbar />
  <MarkdownEditorInput aria-label="Markdown" />
  <MarkdownEditorPreview />
</MarkdownEditor>

Usage

Controlled value

Pass value and onValueChange when the editor content belongs to application state. Use defaultValue for an uncontrolled editor.

Preview scope

The preview is intentionally not a full markdown parser. Use a dedicated, sanitized renderer when you need links, lists, headings, HTML, or nested syntax.

API

Part	Role
MarkdownEditor	Value provider and bordered editor frame.
MarkdownEditorToolbar	Bold, italic, and code selection helpers.
MarkdownEditorInput	Textarea connected to the shared value.
MarkdownEditorPreview	Plain-text preview with three basic inline styles.