# Simple Markdown Editor
URL: /docs/web/components/simple-markdown-editor

Simple Markdown Editor component with multiple variants and sizes.

**Demo:**

```tsx
'use client';

import { useState } from 'react';

import { SimpleMarkdownEditor } from '@docyrus/ui/components/simple-markdown-editor';
import { Badge } from '@docyrus/ui/primitives/ui/badge';

const INITIAL_MARKDOWN = `# Team Notes\n\n- Review PR #142\n- Prepare release notes\n- Sync API contracts`;

export function SimpleMarkdownEditorDemo() {
  const [value, setValue] = useState(INITIAL_MARKDOWN);

  return (
    <div className="space-y-3">
      
      
    </div>
  );
}
```

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/ui-simple-markdown-editor
```

**Dependencies:**
- [class-variance-authority](https://www.npmjs.com/package/class-variance-authority)
- [overtype](https://www.npmjs.com/package/overtype)
- [lucide-react](https://www.npmjs.com/package/lucide-react)

## Usage

```tsx
import {
  SimpleMarkdownEditor
} from "@docyrus/ui/components/simple-markdown-editor";

<SimpleMarkdownEditor
  variant="default"
  size="sm"
  ref={...}
  value="..."
  defaultValue="..."
  onValueChange={() => {}}
  textareaProps={...}
/>
```

## Variants

| Variant | Description |
|---------|-------------|
| `default` | Default style |
| `muted` | Muted — `border-border/70 bg-muted/20` |

## Sizes

| Size | Description |
|------|-------------|
| `sm` | Small — `text-sm` |
| `default` | Default — `text-sm` |
| `lg` | Large — `text-base` |

## API Reference

| Prop | Type | Default |
|------|------|---------|
| `variant` | `"default"` \| `"muted"` | `"default"` |
| `size` | `"sm"` \| `"default"` \| `"lg"` | `"default"` |
| `ref` | `Ref<SimpleMarkdownEditorRef>` | — |
| `value` | `string` | — |
| `defaultValue` | `string` | — |
| `onValueChange` | `(value: string) => void` | — |
| `resizable` | `boolean` | `false` |
| `textareaProps` | `OverTypeOptions['textareaProps']` | — |
| `className` | `string` | — |