Markdown Editor
Live side-by-side markdown editor with instant HTML preview. CommonMark plus GitHub-Flavored Markdown extensions (tables, task lists, strikethrough). 100% client-side.
Markdown Editor
Welcome to BytePane's live markdown editor. Type on the left, watch the HTML render on the right — instantly, in your browser.
Features
- Bold with double asterisks, italic with single
Strikethroughwith double tildesInline codewith backticks- Links with bracket-paren syntax
Code blocks
function greet(name) {
return "Hello, " + name + "!"
}
Lists
- Ordered list item one
- Ordered list item two
- Ordered list item three
Blockquotes start with a greater-than sign.
They can span multiple lines.
Tables (GFM)
| Tool | Purpose |
|---|---|
| JSON Formatter | Format JSON |
| Regex Tester | Test regex |
| Base64 | Encode/decode |
That's it. Start typing!
About Markdown
Markdown is the most widely-used lightweight markup language on the web. Created by John Gruber in 2004 with help from Aaron Swartz, it was designed to be readable as plain text while compiling cleanly to HTML. Two decades later, markdown is the lingua franca of developer documentation: every README on GitHub, every doc on GitLab, every page on Stack Overflow, every message on Slack and Discord, every note in Notion or Obsidian — all use some flavor of markdown.
CommonMark, GFM, and Other Dialects
The original 2004 spec was famously underspecified — there were over a dozen popular implementations that disagreed on edge cases. CommonMark, finalized in 2014, is a strict standard that resolves these ambiguities. Most modern parsers (cmark, markdown-it, remark) implement CommonMark.
GitHub-Flavored Markdown (GFM) is CommonMark plus a handful of common extensions: tables, task lists with checkboxes ([ ] / [x]), strikethrough with ~~, autolinking of bare URLs, and stricter handling of raw HTML. Most documentation platforms support GFM. This editor implements CommonMark plus the GFM extensions.
Markdown Syntax Reference
# H1 ## H2 ### H3
**bold** *italic* ~~strikethrough~~
`inline code` [link](url) 
> blockquote
- bullet item 1. ordered item
- nested? 2. another
- sub-item 3. third
```js
fenced code block with language
```
| Col 1 | Col 2 |
| ----- | ----- |
| cell | cell |
--- (horizontal rule)Common Pitfalls
Single newlines vs paragraphs. A common surprise: in CommonMark a single newline does not create a line break — the two lines join into one paragraph. To force a hard break, end the line with two trailing spaces or a backslash. To start a new paragraph, leave a blank line.
Lists that won't format. Markdown lists need a blank line above the first item. Some text\n- item won't render as a list — but Some text\n\n- item will.
Underscore inside identifiers. foo_bar_baz can accidentally render as italic in some parsers because the underscores are treated as emphasis markers. Most modern parsers (CommonMark, GFM) detect this case and leave intra-word underscores alone, but legacy renderers do not.
HTML sanitization. CommonMark allows raw HTML to pass through, but most platforms strip dangerous tags (<script>, <iframe>, inline on* handlers). If you rely on a specific HTML element, test on the target platform — your <details> tag may work on GitHub but be stripped on Reddit.
When to Use Markdown
- Project READMEs and CHANGELOGs — the de facto standard for open-source documentation.
- Static blog posts — Hugo, Jekyll, Gatsby, Astro, Next.js (MDX) all use markdown as the source format.
- API documentation — OpenAPI/Swagger descriptions are often markdown; tools like Docusaurus and MkDocs generate beautiful sites from markdown.
- Knowledge bases and wikis — Notion, Obsidian, Logseq, Roam, and modern company wikis all use markdown internally.
- Chat and support — Slack, Discord, and Microsoft Teams support markdown-like formatting.
Frequently Asked Questions
What is markdown?
Markdown is a lightweight markup language created by John Gruber and Aaron Swartz in 2004. It uses plain-text symbols (# for headings, ** for bold, > for blockquotes) that compile to HTML. CommonMark (2014) standardized the originally ambiguous spec, and GitHub-Flavored Markdown (GFM) adds extensions like tables, task lists, and strikethrough. Markdown powers READMEs, documentation, blog posts, Slack, and Discord.
What is the difference between CommonMark and GFM?
CommonMark is the standardized core specification adopted by most modern parsers. GitHub-Flavored Markdown (GFM) extends CommonMark with tables, task lists ([ ] and [x]), strikethrough using ~~, autolinking of bare URLs, and disallowed raw HTML. GitHub, GitLab, Bitbucket, Notion, and Obsidian all support GFM. This editor implements CommonMark plus the most common GFM extensions.
Is my draft sent to a server?
No. The markdown-to-HTML conversion runs entirely in your browser using a small inline parser written in JavaScript. You can verify in the Network tab of DevTools that no requests are made while you type. The editor is safe for drafting confidential documents, internal docs, and unpublished blog posts.
Why does my markdown look different on different sites?
Different platforms implement different markdown dialects. GitHub uses GFM, Reddit uses a unique dialect with limited HTML, Slack uses "mrkdwn" (no headings, different bold/italic), Discord supports CommonMark-ish with spoilers, and static-site generators like Hugo or Jekyll add their own extensions (frontmatter, shortcodes). Always preview on the target platform before publishing.
How do I create line breaks in markdown?
A blank line separates paragraphs. Inside a paragraph, two trailing spaces force a hard line break, or a backslash at end of line in CommonMark. Single newlines without trailing spaces are merged into a single paragraph in CommonMark, but GFM treats them as visible line breaks (the "soft break" behavior). This is the most common confusion when writing for different platforms.
Can I include raw HTML in markdown?
Yes — CommonMark allows inline HTML to pass through. However, many platforms (GitHub, Reddit, most static-site generators) sanitize raw HTML for security, stripping <script>, <iframe>, and inline event handlers. If you rely on a specific HTML element, test on the target platform. For portable markdown, prefer pure markdown syntax over HTML where possible.
How do I write code blocks with syntax highlighting?
Use triple backticks followed by the language identifier, then the code, then closing triple backticks on their own line. Most renderers (GitHub, GitLab, Discord, Notion) will then apply syntax coloring based on the language. Common identifiers: js, ts, py, go, rust, sh, json, yaml, html, css. The language tag is optional but recommended for accessibility and tooling.