What is Markdown?

Markdown is a lightweight plain-text formatting syntax invented by John Gruber in 2004. The core idea: a few simple symbols — asterisks for bold, hashes for headings, hyphens for lists — give plain text enough structure that it renders to clean, well-formed HTML without the author ever writing a tag. What makes Markdown genuinely useful is that the source file reads naturally even before rendering, unlike HTML or LaTeX where the markup overwhelms the content. Today it is the default writing format for GitHub README files, Reddit posts, Discord messages, Notion pages, technical documentation sites, and almost every static site generator. If you write for any of those platforms, you are already writing Markdown.

The basic Markdown syntax

Most of Markdown fits on one screen. The elements below cover the vast majority of what you will use in an online markdown editor day-to-day.

Headings, emphasis, and strikethrough

# Heading 1
## Heading 2
### Heading 3

**bold text**
*italic text*
~~strikethrough~~

Lists

- Bullet item
- Another item
  - Nested item

1. First
2. Second
3. Third

Links, images, and code

[Link text](https://example.com)
![Alt text](https://example.com/image.png)

Inline `code` uses backticks.

```
// fenced code block
function hello() { return "hi"; }
```

Blockquotes and horizontal rules

> This is a blockquote.
> It can span multiple lines.

---

Inline `code` uses a single backtick on each side. Fenced code blocks use triple backticks ``` on their own lines. A horizontal rule is three or more hyphens on a line by themselves.

GitHub-flavored Markdown (GFM)

The original 2004 Markdown spec is intentionally minimal. The CommonMark standardization pinned down the ambiguous edges, but it still omits features that writers use constantly: tables, task lists, and strikethrough. GitHub-flavored Markdown(GFM) adds these on top of CommonMark and has become the de-facto standard variant that most editors, renderers, and documentation platforms actually implement. When someone asks for "Markdown support" in 2024, they almost always mean GFM.

This online markdown editor uses the marked library with gfm: true and breaks: true — the same combination used by GitHub itself. That means the following GFM extensions work out of the box:

GFM tables

| Name    | Role    | Active |
|---------|---------|--------|
| Alice   | Admin   | Yes    |
| Bob     | Editor  | No     |

GFM task lists

- [x] Write the draft
- [x] Add examples
- [ ] Publish

Strikethrough (~~text~~) and auto-linking bare URLs are also GFM extensions that render correctly in this editor.

Markdown vs MDX vs AsciiDoc vs reStructuredText

Markdown is not the only lightweight markup format. If you're choosing what to write documentation in, or inheriting a codebase that uses something else, here is how the four main contenders compare:

Practical guidance: Start with Markdown + GFM. Move to MDX only if your docs site needs interactive components (code playgrounds, live previews, framework version switchers). Move to AsciiDoc only for book-length content. Move to rST only if you're documenting a Python library — Sphinx's autodoc integration is genuinely better than any Markdown-based alternative, and the Python community's docs infrastructure all speaks rST.

The CommonMark vs GFM distinction: "Markdown" itself has no single spec. CommonMark is the closest thing to a standard — it defines the unambiguous baseline. GFM (GitHub Flavored Markdown) adds tables, task lists, strikethrough, and auto-linking on top of CommonMark. This editor renders CommonMark + GFM, which matches what 95% of sites actually support.

Why a side-by-side editor?

Markdown is readable as plain text — that is the whole point. But "readable" is not the same as "verifiably correct." A live preview makes it easy to catch mistakes before you publish: a heading that ended up one level too deep, a table whose pipe alignment is off, a fenced code block that never closed and swallowed the next three paragraphs as code. These are mistakes that pure-text editing misses because the source still looks like valid text.

Side-by-side (source left, rendered HTML right) means you see both at once. There is no tab-switching, no manual refresh, no mental round-trip. This is the standard layout for serious Markdown writing environments — StackEdit, Typora, Bear, Obsidian — for the same reason. The right pane in this md editor updates on every keystroke, so the rendering lag is zero. For short notes the live preview is a convenience; for longer documents with tables and code blocks it is the difference between noticing the problem now versus noticing it after you paste the HTML into your CMS.

What this tool does — and does not — do

A precise accounting of scope, so there are no surprises:

• Renders GitHub-flavored Markdown as HTML in a live side-by-side preview as you type.
• Copy HTML — copies the rendered inner HTML to your clipboard. Useful for pasting the converted Markdown into a CMS, blog post editor, or email template that accepts raw HTML.
• Download .html — saves a complete standalone HTML file with a basic style block, ready to open directly in a browser.
• Sample — loads a representative Markdown example so you can see the supported syntax at a glance without typing anything.
• Does not save your work between visits — there is no localStorage and no cloud sync. Your text exists only in the current browser tab. Copy or download before closing.
• Does not render math formulas — no MathJax or KaTeX integration in this version.
• Does not render Mermaid diagrams or other extension syntaxes beyond GFM.
• Does notexport to PDF directly. Use your browser's Print → Save as PDF on the rendered preview pane if you need a PDF.

How to use this Markdown editor

1. Click Sample to load a starter template, or just start typing in the left pane.
2. The right pane updates instantly with the rendered HTML. No button to click — the markdown preview refreshes on every keystroke.
3. Use the toolbar when you are done writing:
   • Copy HTML — copies the rendered HTML string for pasting into a CMS, static site file, or email.
   • Download .html — saves a complete, styled HTML file you can open directly in a browser or hand off to a colleague.
   • Clear — empties the editor to start fresh.
4. If you want a PDF, use Download .htmlfirst, open the file in your browser, and print it with "Save as PDF" as the destination.

Example: Markdown to HTML

Input (Markdown source)

## Project Status

| Milestone      | Due     | Done |
|----------------|---------|------|
| Design         | Apr 1   | Yes  |
| Implementation | Apr 15  | No   |

### Tasks

- [x] Wireframes approved
- [ ] Write unit tests
- [ ] Deploy to staging

> **Note:** All dates are tentative.

Output (rendered HTML, simplified)

<h2>Project Status</h2>
<table>
  <thead><tr><th>Milestone</th><th>Due</th><th>Done</th></tr></thead>
  <tbody>
    <tr><td>Design</td><td>Apr 1</td><td>Yes</td></tr>
    <tr><td>Implementation</td><td>Apr 15</td><td>No</td></tr>
  </tbody>
</table>
<h3>Tasks</h3>
<ul>
  <li><input type="checkbox" checked disabled> Wireframes approved</li>
  <li><input type="checkbox" disabled> Write unit tests</li>
  <li><input type="checkbox" disabled> Deploy to staging</li>
</ul>
<blockquote><p><strong>Note:</strong> All dates are tentative.</p></blockquote>

The markdown to html conversion preserves all GFM table structure and renders task-list checkboxes as disabled <input type="checkbox"> elements, matching how GitHub renders them.

Privacy and security

Your Markdown never leaves your browser. All parsing and rendering happens locally via the marked library running in your browser tab. There is no upload, no server call, and no copy stored anywhere. You can write drafts containing passwords, internal project notes, or private details without concern — the network tab will show no requests related to your content.

One security note worth being explicit about: Markdown allows raw HTML, including <script> tags. This editor renders that HTML directly into the preview pane. Because the editor runs entirely in your browser and the preview is only ever shown to you (the same person who typed it), there is no cross-user XSS risk — you cannot attack yourself by typing a script tag. If you copy the rendered HTML and paste it into a context where other users will see it — a blog, a forum, a CMS — make sure that system has its own sanitizer. Most modern CMSes do. This note applies to any Markdown-to-HTML converter, not just this one.

Frequently asked questions

Why does my Markdown not render a feature I expect?

This editor supports GitHub-flavored Markdown — the most common variant. Some features are platform-specific extensions that GFM does not include: math formulas (used by Jupyter and some wikis), Mermaid diagrams, footnotes (used by Pandoc and some static site generators), custom containers, and definition lists. If your Markdown uses any of these, it will not render correctly here. The source text will still be preserved — you can copy it out — but the preview will show the raw syntax instead of the rendered form.

Why is there no syntax highlighting in the code blocks?

This editor renders plain code blocks without colored syntax highlighting. Adding a library like Prism.js or highlight.js is on the roadmap but is not in this version. The downloaded .html file also ships without a syntax highlighter. If you need highlighted code in your output, run the HTML through a highlighter on your end after downloading — Prism has a straightforward client-side integration.

Can I save my draft?

Not yet. This version has no localStorage and no cloud save. Your text only exists in the current browser tab. If you close the tab, the content is gone. Always use Copy HTML or Download .html before closing — or keep the raw Markdown by copying the left-pane text directly into a text file.

Why is the line breaking acting unexpectedly?

Markdown has a known quirk: in strict CommonMark, a single newline in the source becomes a space in the rendered output, not a visible line break. To create a new paragraph you need a blank line between blocks. This editor enables breaks: true in the marked configuration, which makes single newlines produce real <br> tags. This matches the behavior most users expect from a chat or notes app, but it differs from strict CommonMark. If you are authoring content for a platform that uses strict CommonMark (some static site generators do), be aware that single newlines may not produce line breaks there even if they do here.

What is the difference between Copy HTML and Download .html?

Copy HTML copies only the inner HTML — the <h1>, <p>, <ul> tags and their content, with no surrounding page structure. Use this when pasting into a CMS or blog editor that already has its own page wrapper and stylesheet. Download .html gives you a complete standalone HTML file with a <html>, <head>, and a basic style block — open it directly in a browser and it looks like a finished page. Use this when you want to share or archive a self-contained document.

Is Markdown the same as MDX?

No. MDX is Markdown extended with JSX — it lets you embed React components directly inside a Markdown document. MDX is primarily used in React-based documentation sites and static site generators such as Next.js, Astro, and Docusaurus. Plain Markdown (what this tool handles) is just text with lightweight formatting syntax. If you are writing for a platform that supports MDX, the Markdown portions will render identically, but the JSX component syntax will not be handled by this editor.

Is my data sent anywhere?

No. Everything runs locally in your browser. The marked library parses and renders your Markdown on your device. No text is uploaded, no request is made to any server, and nothing is logged. You do not need an account or any signup to use this tool.