---
metaTitle: Markdown editor component | AwesCode UI
meta:
  - name: description
    content: The <AwMarkdownEditor /> component is used to render Markdown editor - UI Vue component for AwesCode UI.
title: Markdown editor
---

# AwMarkdownEditor

**Category:** Organism | **Import:** Dynamic

The `AwMarkdownEditor` component is a markdown editor with live preview, syntax highlighting, and formatting shortcuts. It provides a split view between editor and preview modes.

## Overview

`AwMarkdownEditor` provides a markdown editing solution with:
- Markdown text editor
- Live HTML preview
- Syntax highlighting (Prism.js)
- Formatting shortcuts
- Editor/preview mode toggle
- Auto-resizing textarea
- Sanitized HTML output

## Usage

### Basic Example

```markup
<AwMarkdownEditor
    v-model="markdown"
    @change="handleChange"
/>
```

### With Initial Content

```markup
<AwMarkdownEditor
    :source="initialMarkdown"
    @change="handleChange"
/>
```

### Editor Only Mode

```markup
<AwMarkdownEditor
    v-model="markdown"
    :switchers="['editor']"
/>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| source | Markdown source text | `String` | `false` | `''` |
| switchers | Available modes: `'editor'`, `'preview'` | `Array` | `false` | `['editor', 'preview']` |

**Switchers Options:**
```javascript
['editor']              // Editor only
['preview']              // Preview only
['editor', 'preview']    // Both (default)
```

### Slots

This component does not have slots.

### Events

| Name | Payload | Description |
|------|---------|-------------|
| change | `String` | Emitted when markdown content changes |

### Config Options

The component uses default configuration. You can customize markdown rendering via marked.js options.

## Related Components

- `AwTabNav` - Tab navigation for mode switching
- `AwButton` - Button components for formatting shortcuts

## Notes

- **Import Method:** Dynamic - Component is loaded on-demand as an organism
- Uses `marked` library for markdown parsing
- Uses `Prism.js` for code syntax highlighting
- Uses `insane` for HTML sanitization
- Textarea auto-resizes using `autosize` library
- Formatting shortcuts: heading, bold, italic, quote
- Preview shows rendered HTML with syntax highlighting
- HTML output is sanitized for security
- Editor and preview can be toggled via tab navigation
- Code blocks are highlighted based on language
- Component supports all standard markdown syntax
- Preview updates in real-time as you type
- Shortcut buttons insert markdown tokens at cursor position