Markdown Editor

Edit Markdown with a live side-by-side preview. Supports headers, bold, italic, lists, links, images, code blocks, and tables. All processing happens client-side.

200 words · 1198 chars · 62 lines

Markdown

# Markdown Editor

Welcome to the **Markdown Editor**! Type on the left and see a live rendered preview on the right.

## Text Formatting

This is **bold text**, *italic text*, and ***bold italic text***.

You can also use ~~strikethrough~~ for deleted content.

## Links & Images

Here is a [link to ToolBird](https://toolbird.dev) and an image:

![Placeholder](https://via.placeholder.com/400x200?text=Markdown+Editor)

## Lists

### Unordered List
- First item
- Second item with **bold**
- Third item with `inline code`

### Ordered List
1. Step one
2. Step two
3. Step three

## Code

Inline code: `const x = 42;`

```javascript
function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet("World"));
```

## Blockquote

> "The best way to predict the future is to invent it."
> -- Alan Kay

## Table

| Feature | Status | Notes |
|---------|--------|-------|
| Headers | Done | H1 through H6 |
| Bold/Italic | Done | **bold**, *italic* |
| Lists | Done | Ordered & unordered |
| Code Blocks | Done | Fenced with ``` |
| Tables | Done | GFM-style tables |
| Links | Done | [text](url) |

## Horizontal Rule

---

That's it! Start editing to see your Markdown rendered in real time.

Preview

Markdown Editor

Welcome to the Markdown Editor! Type on the left and see a live rendered preview on the right.

Text Formatting

This is bold text, italic text, and bold italic text.

You can also use ~~strikethrough~~ for deleted content.

Links & Images

Here is a link to ToolBird and an image:

Lists

Unordered List

First item
Second item with bold
Third item with inline code

Ordered List

Step one
Step two
Step three

Code

Inline code: const x = 42;

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet("World"));

Blockquote

"The best way to predict the future is to invent it."

-- Alan Kay

Table

Feature	Status	Notes
Headers	Done	H1 through H6
Bold/Italic	Done	bold, italic
Lists	Done	Ordered & unordered
Code Blocks	Done	Fenced with ```
Tables	Done	GFM-style tables
Links	Done	text

Horizontal Rule

That's it! Start editing to see your Markdown rendered in real time.

How to Use the Markdown Editor

Type or paste your Markdown into the editor on the left side.
The rendered HTML preview updates in real time on the right side.
Use the toolbar buttons to quickly insert formatting (bold, italic, headings, lists, code, links, images).
Click Copy HTML to copy the generated HTML output to your clipboard.
Click Copy Markdown to copy the raw Markdown source.

Supported Markdown Syntax

Headings (# through ######)
Bold (**text**) and Italic (*text*)
Strikethrough (~~text~~)
Inline code (`code`) and fenced code blocks (```)
Links [text](url) and images ![alt](url)
Unordered lists (- item) and ordered lists (1. item)
Blockquotes (> quote)
Tables with GFM pipe syntax and alignment
Horizontal rules (---)

Features

Live side-by-side preview as you type
Formatting toolbar for quick insertion
GFM-style table support with column alignment
Copy generated HTML with one click
Word, character, and line count
100% client-side processing for full privacy
No data stored, no sign-up required