Skip to content

Markdown Preview & Editor Online Free

Live side-by-side Markdown editor with GitHub Flavored Markdown support — tables, task lists, strikethrough, fenced code blocks. Render-safe by default.

In your browseryour files never leave your device.

Learn more
78 words · 1 min read
Outline (3)
  • Hello World
  • Features
  • Try it out
# Hello World

This is a **Markdown** preview tool with live syntax highlighting.

## Features

- *Real-time* preview
- Supports **bold** and *italic*
- Inline `code` blocks
- [Links](https://example.com)
- ~~Strikethrough~~ text
- Tables and task lists

> Blockquotes work too

| Feature | Supported |
|---------|-----------|
| Bold    | Yes       |
| Links   | Yes       |
| Tables  | Yes       |

```ts
// Fenced code blocks are highlighted with shiki.
function greet(name: string): string {
  return `Hello, ${name}!`;
}
```

- [x] Task list item
- [ ] Unchecked item

---

### Try it out

1. Type on the left
2. See results on the right

Embedded HTML is sanitised — <script> tags and event handlers are stripped before rendering. Edit shortcuts: ⌘/Ctrl+B bold, ⌘/Ctrl+I italic, ⌘/Ctrl+K link.

About this tool

Open the page, you have a side-by-side editor: Markdown on the left, rendered HTML on the right. Every keystroke updates the preview. The renderer is react-markdown with the remark-gfm extension, so it handles standard CommonMark plus the GitHub extensions: tables, task lists, strikethrough, autolinks, fenced code blocks. HTML embedded in your Markdown is sanitized through rehype-sanitize, so pasting from a sketchy source doesn't open you up to cross-site-scripting attacks. Useful when drafting a README outside the GitHub web editor, writing a blog post in a CMS that lacks live preview, or sanity-checking a Markdown email signature before sending it to a list. The editor starts with a sample document so you can see what the renderer supports before writing anything.

How to markdown preview & editor online free

  1. Type or paste Markdown

    Editor on the left. The page starts with a sample document so you can see what the renderer supports without having to type anything first.

  2. Watch the live preview

    Every keystroke updates the right pane. Headings, bold, italic, lists, links, tables, task lists, fenced code, strikethrough, blockquotes — all rendered as you type, no debounce delay.

  3. Copy what you need

    The Markdown source stays in your editor pane. The "Copy HTML" button at the top of the preview copies the rendered HTML to your clipboard, useful for pasting into a CMS that takes HTML but not Markdown.

  4. Paste into the target

    GitHub README, Substack draft, Notion page, an email, your CMS, a chat message. The source Markdown for Markdown-aware tools, the rendered HTML for the rest.

Why use this tool

GitHub READMEs, blog posts, technical docs, knowledge-base articles, even some chat platforms — Markdown is the default writing format for technical work. But the GitHub web editor saves on every keystroke (committed to your branch as drafts that pollute the history), and most blog CMSes either render Markdown badly or render it at all only on publish. So you write blind. This tool gives you the visual feedback loop without committing anything to a repo or hitting publish. Paste the draft, fix whatever looks off — a misaligned table, a code fence with the wrong language, an accidental nested list — copy the source back, then paste into the actual target. The rendered HTML is also copyable, which is useful for one-time conversions when the target system accepts HTML but not Markdown (some legacy CMSes, most rich-text-only email clients).

Features

Live side-by-side preview

Editor and preview share the screen. Every keystroke updates the right pane immediately — no debounce, no "render" button, no submit. The two panes scroll independently so you can keep your cursor visible while scrolling the rendered output, which matters when you're hunting for a misaligned table cell in a long document.

GitHub Flavored Markdown

Tables, task lists with checkboxes, strikethrough with ~~tilde~~, fenced code blocks with triple-backticks, and autolinks. The preview matches what GitHub shows on a README closely. Not pixel-perfect (the typography and code-block styling differ slightly), but close enough that what you see here is structurally what your repo will render.

Sanitized HTML rendering

Markdown can embed raw HTML, which is a vector for cross-site-scripting attacks if the source is untrusted. This renderer pipes the output through rehype-sanitize, which strips dangerous tags and attributes (script tags, on-event handlers, javascript: URLs) before painting to the DOM. Safe to paste from any source, including unknown third-party Markdown files.

Copy HTML output

Beyond copying the Markdown source, you can copy the rendered HTML directly via the button above the preview pane. Useful for pasting into CMSes that accept HTML but choke on Markdown, for grabbing a quick rendered snippet for an email, or for converting a one-off block of Markdown to HTML when you don't want to install a converter locally.

Privacy & security

This tool runs entirely in your browser. Your files are never uploaded to a server — every step of the process (reading, transforming, downloading) happens on your device using JavaScript and the Web APIs. You can verify this in your browser's network tab: clicking the tool's main action triggers zero requests to our servers. The page itself is served over HTTPS, but once it loads, your data stays put. No accounts, no tracking of file contents, no scanning your inputs.

Frequently asked questions

Free?
Yes. No account, no usage cap, no premium tier. The renderer is open-source react-markdown — there's no upstream cost to pass on, and the rendering happens entirely in your browser, so there's no server cost either.
Privacy?
All editing and rendering happens in your browser. The Markdown text you type isn't uploaded, logged, or analyzed. You can verify this in your browser's network panel: type into the editor and watch network stay quiet. The renderer is a JavaScript function running on your machine; there's no API call when you type.
Which Markdown features are supported?
CommonMark (the standard spec) plus GitHub Flavored Markdown via remark-gfm: headings (h1-h6), bold, italic, links, images, ordered/unordered lists, code blocks (fenced and indented), inline code, tables, task lists, strikethrough, blockquotes, horizontal rules, autolinks. Headings nest correctly, lists nest correctly, blockquotes can contain anything. The standard subset works.
Does it render exactly like GitHub?
Close, not identical. GitHub applies its own CSS for spacing, fonts, and code-block themes. The structure and semantics are the same: what GitHub renders as a heading, this renders as a heading; what GitHub treats as a fenced code block, this treats as a fenced code block. The visual styling differs because this tool uses Tailwind's prose styles, and GitHub uses its own design system. If you need exact-match preview, the GitHub web editor or `grip` (a Python tool that uses GitHub's actual rendering API) is closer.
What about syntax highlighting in code blocks?
Yes — Shiki is wired in and loads lazily the first time the document contains a fenced code block, so the bundle stays small for documents that don't use code. The pre-registered grammars cover TypeScript/JSX (with `ts` and `js` aliases), Python (`py`), Go, Rust (`rs`), JSON, Bash (`sh`/`shell` aliases), HTML, CSS, Markdown (`md`), YAML (`yml` alias), and SQL. Themes are GitHub Dark by default. Anything outside that list falls through to plain monospace rather than crashing. For exotic languages, paste into CodePen or Stackblitz instead.
LaTeX or math equations?
Supported via KaTeX. Inline math wraps in single dollar signs (`$E=mc^2$`), block math in double dollar signs (`$$ ... $$`). The KaTeX bundle plus its font CSS is heavy (about 500KB), so it loads lazily the first time the document actually contains a math expression — documents without math never pay for it. For full LaTeX documents that need TikZ, BibTeX, or proper page layout, use Overleaf. For Markdown writing with occasional formulas, this works.
Is embedded HTML safe?
Yes. The rendered output goes through rehype-sanitize, which strips script tags, on-event handlers (onclick, onmouseover, and so on), javascript: URLs, data: URLs that resolve to scripts, and other known XSS vectors. Safe HTML tags (em, strong, code, span with limited attributes) pass through. Iframes and most multimedia tags are stripped by default. The sanitizer uses an allowlist approach, which is safer than a blocklist because anything not explicitly allowed gets stripped.
Saving drafts?
Not built in. The text lives in the editor textarea while the tab is open. Copy your Markdown out before closing the tab. If you want autosave and cross-device sync, use a dedicated Markdown editor like Obsidian, iA Writer, VS Code with the markdown extension, or GitHub.dev. This tool is for quick preview and one-off conversion, not for long-running writing sessions.
Mobile?
The two-pane layout stacks vertically on narrow screens, editor on top, preview below. It works for short edits, but cramped. The textarea is tappable and the preview is readable, but tap-typing a long document on a phone is miserable regardless of the editor. For serious mobile Markdown editing, a dedicated app like iA Writer or Bear gives you a much better experience.
CommonMark vs GFM — what's the difference?
CommonMark is the standardized spec (commonmark.org) that defines the core syntax most Markdown processors implement. GitHub Flavored Markdown extends it with tables, strikethrough, task lists, autolinks, and a few smaller additions. This tool supports both, which means anything you write here will render in any modern Markdown processor: GitHub, GitLab, Bitbucket, most static-site generators, most CMSes. If you stick to CommonMark plus GFM, you avoid the dialect fragmentation that plagued early Markdown.