Text & Writing
Free Online Markdown Editor with Live Preview
Write Markdown with live HTML preview. Copy output as HTML.
What is Markdown?
Markdown is a lightweight markup language created by John Gruber in 2004. It allows you to write formatted text using plain-text syntax — asterisks for bold, hashes for headings, dashes for lists — which is then converted to clean HTML. The goal was to make writing for the web as readable as possible in its raw form.
Today, Markdown is the standard writing format for GitHub README files (using GitHub Flavored Markdown), documentation platforms (Notion, Confluence, GitBook), static site generators (Jekyll, Hugo, Next.js MDX), and note-taking apps (Obsidian, Bear). The base specification is CommonMark — a standardized, well-specified version of Markdown that most modern tools follow. Understanding Markdown syntax is a fundamental skill for any developer or technical writer.
How to use the Markdown editor
- 1Write or paste Markdown
Click the source panel and start writing. The editor comes pre-loaded with an example covering the most common syntax elements.
- 2Switch between views
Split shows the source and preview side by side. Source shows the raw Markdown only. Preview shows the rendered HTML only — useful on smaller screens.
- 3Preview the rendered output
The right panel renders your Markdown to HTML in real time as you type. Headings, bold, italic, code blocks, lists, and links are all supported.
- 4Export as HTML
Click Copy HTML to copy the full rendered HTML to your clipboard. Paste it directly into a CMS, email template, or web page.
Markdown syntax cheat sheet
| Syntax | Result | Notes |
|---|---|---|
| # Heading 1 | H1 heading | Use only one H1 per document |
| ## Heading 2 | H2 heading | Main sections |
| **bold** | Bold text | Two asterisks on each side |
| *italic* | Italic text | One asterisk or underscore |
| `inline code` | Inline code | Backtick on each side |
| ```\ncode block\n``` | Code block | Three backticks, optionally with language name |
| - item | Unordered list item | Also works with * or + |
| 1. item | Ordered list item | Numbers don't need to be sequential |
| > quote | Blockquote | Nestable with multiple > |
| [text](url) | Link | Title optional: [text](url "title") |
|  | Image | Alt text required for accessibility |
| --- | Horizontal rule | Also works with *** or ___ |
Advanced Markdown features (GitHub Flavored Markdown)
CommonMark covers the basics, but most platforms implement extensions. GitHub Flavored Markdown (GFM) is the most widely adopted superset and adds several features that are essential for technical writing:
| Col 1 | Col 2 |\n|-------|-------|\n| A | B |Pipe-separated columns with a header separator row. Colons in the separator control alignment: :--- left, :---: center, ---: right.
- [x] Done\n- [ ] TodoCheckboxes rendered as interactive elements on GitHub. Useful for tracking progress in issues and PRs.
~~deleted text~~Two tildes on each side. Renders as <del> in HTML. CommonMark does not include this — GFM extension only.
```javascript\nconst x = 1;\n```The language identifier after the opening fence enables syntax highlighting in supported renderers.
Text[^1]\n\n[^1]: Footnote contentSupported in GitHub, Pandoc, and most static site generators. Not part of core CommonMark.
https://example.comGFM automatically converts bare URLs into clickable links without needing [text](url) syntax.
Markdown flavors compared
Markdown has no single official specification — each platform implements its own dialect. Knowing which flavor your target environment uses prevents the frustration of syntax that works in one place and breaks in another.
Where Markdown is used
Markdown has quietly become the dominant writing format for developer-facing content. Understanding where it appears helps you recognise when to write Markdown versus when a richer format is more appropriate.
Version control and code collaboration: GitHub, GitLab, and Bitbucket render Markdown in READMEs, pull request descriptions, issue comments, wikis, and release notes. The README.md at the root of a repository is the first thing visitors see — it is the homepage of your project. Writing it well in Markdown is one of the highest-leverage things a developer can do for their open-source project.
Documentation platforms: Notion, Confluence, GitBook, Docusaurus, VitePress, MkDocs, and Mintlify all use Markdown or a close derivative as their primary authoring format. Many accept raw .md files checked into a repository, making documentation-as-code workflows possible.
Blogging and publishing: Ghost, Hashnode, dev.to, Medium (partial), Substack (partial), and Jekyll/Hugo/Eleventy static site generators use Markdown for post content. The author writes in Markdown; the platform or build tool converts it to HTML. This separation of content from presentation is the core advantage — the same Markdown file can render in multiple themes and formats without modification.
Writing technical documentation in Markdown
Technical documentation differs from blog posts and READMEs in scope and longevity — it must remain accurate across software versions, serve multiple skill levels simultaneously, and be maintainable by a team. Markdown's simplicity is a feature here: anyone can contribute without learning a CMS or documentation framework.
The H1 is the document title and should appear once at the top. Use H2 for major sections, H3 for subsections. Deep nesting (H4+) usually signals a section that should be split into a separate document.
Always specify the language after the opening backticks: ```python, ```bash, ```json. This enables syntax highlighting in all major renderers and signals to readers what runtime the code targets.
Technical readers scan and jump to relevant sections. Each H2 section should make sense without reading the previous ones. Avoid forward references that assume the reader has read earlier sections.
Relative links break when documentation is viewed from different base paths or mirrored to another platform. For links between documents, use the full path from the documentation root.
Many documentation platforms (Docusaurus, MkDocs, GitBook) support callout blocks — > [!WARNING], > [!NOTE], or custom syntax. Use them for important caveats, deprecation notices, and security warnings.
Add a "Last updated" date or version tag to pages that describe APIs, configuration, or behavior that may change between releases. This helps readers assess whether the documentation is still current.
Markdown rendering pipelines — how .md becomes HTML
Understanding how Markdown is processed helps you debug rendering inconsistencies across tools. The pipeline has three stages: parsing (source text → AST), transformation (AST → modified AST), and serialization (AST → HTML or another format).
Popular parsers include marked.js (fast, browser-friendly, used by this editor), remark (AST-based, plugin ecosystem, used by Next.js MDX and Docusaurus), markdown-it (CommonMark compliant, plugin-friendly), and Pandoc (multi-format, used in academic publishing and PDF generation). The choice of parser determines which extensions and plugins are available.
For security, all Markdown renderers should sanitize the HTML output before injecting it into the DOM. Raw Markdown can contain inline HTML, including script tags and event handlers, which become XSS vectors if rendered without sanitization. This editor uses DOMPurify to sanitize the rendered output. When building your own Markdown pipeline, use a sanitizer like DOMPurify (browser) or sanitize-html (Node.js) as the final step before rendering.
FAQ
Common questions
What Markdown syntax is supported?
Headings (# to ######), bold (**text**), italic (*text*), inline code (`code`), code blocks (```), links, images, unordered lists (- item), ordered lists (1. item), blockquotes (> text), and horizontal rules (---).
Can I export the HTML?
Yes. Click "Copy HTML" to copy the rendered HTML to your clipboard, ready to paste into any website, CMS, or email template.
Is my content saved?
Content is not persisted between sessions. If you need to save your work, copy it before closing the browser tab.
What is Markdown used for?
Markdown is the standard writing format for README files, GitHub, documentation, blog posts (Ghost, Jekyll, Hugo), note-taking apps (Notion, Obsidian), and comment systems. It converts to clean HTML.
How do I create a table in Markdown?
Use pipes and hyphens: | Column 1 | Column 2 | on one line, then | --- | --- | to define the header separator, then data rows in the same format. Alignment is controlled by colons: |:---| left-aligns, |---:| right-aligns, |:---:| centers. Table support is a GFM (GitHub Flavored Markdown) extension, not part of the original spec.
What is the difference between Markdown flavors?
The original Markdown spec (2004) is minimal. CommonMark is the standardized, unambiguous version used by most modern tools. GitHub Flavored Markdown (GFM) adds tables, task lists, strikethrough, and auto-links. MultiMarkdown and Pandoc add footnotes, citations, and other academic features. This editor uses CommonMark-compatible rendering.
How do I add syntax highlighting to code blocks?
Use a fenced code block with the language name after the opening backticks: ```javascript on the first line. Supported language identifiers include javascript, typescript, python, bash, json, css, html, sql, rust, and many more. The renderer applies syntax highlighting automatically based on the language tag.
Can I use HTML inside Markdown?
Yes — most Markdown renderers allow inline HTML. You can use <div>, <span>, <br>, <details>, <summary>, and other tags directly in your Markdown. However, some platforms (like GitHub comments) strip unsafe HTML tags for security. For maximum compatibility, prefer Markdown syntax over raw HTML wherever possible.
More in Text & Writing