Markdown Editor with Live Preview

Writing Markdown with confidence

Markdown is a lightweight markup language that turns plain text into formatted HTML using a handful of intuitive symbols. It powers READMEs, documentation, issue trackers, static sites, and note apps because it stays readable in its raw form while still producing rich output. A live-preview editor lets you see exactly what the renderer will produce as you write.

CommonMark: the spec that removes ambiguity

The original Markdown left many edge cases undefined, so different tools rendered the same text differently. CommonMark fixed that with a precise specification. This editor follows CommonMark, so the rules below behave predictably no matter how you nest or combine them.

Core syntax

# Heading 1
## Heading 2

**bold**, *italic*, and `inline code`

- bullet item
- another item

1. numbered item
2. second item

> a blockquote

[link text](https://example.com)
![alt text](image.png)

Headings use one to six # marks; emphasis uses asterisks; lists use a leading dash or number; and links and images share the same bracket-and-parenthesis shape, with images adding a leading ! .

GitHub-Flavored Markdown extensions

GFM adds the features people actually need in documentation. Task lists render as checkboxes, tables align with colons, and tildes strike text through:

- [x] done
- [ ] still to do

| Name  | Role     |
| :---- | -------: |
| Ada   | Engineer |

~~deprecated~~

Code blocks and language hints

Fenced code blocks are the safest way to show code. Wrap the block in triple backticks and name the language after the opening fence to enable syntax highlighting. Everything inside is treated literally, so special characters and indentation survive untouched.

The blank-line rule

Block-level elements are separated by blank lines, and a single newline inside a paragraph collapses to a space. If two lines unexpectedly merge, add a blank line between them; if you need a hard break within a paragraph, end the line with two spaces or a backslash.

Safe rendering

Because Markdown permits inline HTML, this editor sanitizes the rendered output with DOMPurify, stripping scripts and event handlers. You get the convenience of raw HTML when you need it, without the security risk of executing pasted content.

Related dev tools

• Diff Checker — compare two versions of a document.
• HTML Encoder — escape entities before embedding HTML in Markdown.
• JSON Formatter — tidy JSON snippets to paste into code blocks.
• Word Counter — track the length of what you are writing.