Skip to content

Markdown Previewer

Free online Markdown previewer with live GFM rendering, themes, live stats, and auto table of contents — 100% private, no upload.

Updated

What is the Markdown Previewer?

The Markdown Previewer is a free, browser-based tool that turns raw Markdown into beautifully formatted HTML in real time. Whether you're drafting a README, writing release notes, formatting a blog post, or polishing documentation, you can paste your Markdown on the left and see the rendered result on the right — instantly, with no round-trips to a server.

Why use a dedicated previewer?

Most "preview" experiences are bolted onto full editors (Typora, Obsidian, VS Code). They're heavy, account-bound, or store your drafts in the cloud. The Markdown Previewer takes the opposite approach:

  • Zero setup — opens in any modern browser, no install, no sign-up.
  • Privacy-first — your text never leaves the page. Everything is parsed locally with a built-in GitHub-Flavored Markdown engine.
  • Lightning fast — keystroke-by-keystroke rendering with no debounce, no spinner, no waiting.
  • GFM out of the box — tables, task lists, strikethrough, autolinks, fenced code blocks with language labels.

What you get at a glance

  • A split-pane editor and live preview, with toggles for Edit-only or Preview-only when you need to focus.
  • Four preview themes — GitHub Light, GitHub Dark, Solarized, and Minimal — so the reading experience matches your environment.
  • Live word, character, line, heading, code-block, link, and image counts plus an estimated reading time.
  • An auto-generated table of contents with anchor links that smooth-scroll to each section.
  • A Copy HTML button that grabs the rendered markup for pasting into blogs, CMSes, or chat tools.
  • A built-in Sample document so you can explore every supported feature in one click.

Who it's for

  • Developers writing READMEs, CHANGELOGs, or design docs and wanting a quick visual check before pushing.
  • Technical writers and bloggers drafting articles in Markdown and needing a faithful preview of the final layout.
  • Students and researchers taking notes in .md and wanting instant feedback on formatting.
  • Anyone who's ever pasted Markdown into a chat window and wondered why the formatting vanished.

If you've ever wished StackEdit, Dillinger, or HackMD loaded faster, respected your privacy, or just stayed out of your way — give this one a try.

How it works

How the Markdown Previewer works

The Markdown Previewer is built around a small but carefully engineered pipeline that runs entirely in your browser. Here's a tour of what happens between the moment you press a key and the moment you see the rendered output.

1. Source input

The editor on the left is a plain <textarea>. It's intentionally minimal — no autocompletion, no syntax highlighting, no opinionated shortcuts — so it never gets between you and your text. Every keystroke updates the source state and triggers a re-render.

2. Block-level parsing

The first pass reads the raw Markdown and splits it into blocks separated by blank lines. Each block is then classified:

  • Headings (ATX # H1–###### H6 and setext === / --- underlines)
  • Paragraphs (anything else that wraps onto multiple lines)
  • Lists (ordered 1. and unordered - / * / +, with task-list support via [x] / [ ])
  • Blockquotes (> ...)
  • GFM tables (pipe-style with --- separator)
  • Fenced code blocks (```lang ... ```)
  • Indented code blocks (4-space or tab indent)
  • Horizontal rules (---, ***, ___)
  • Raw HTML (allow-listed tags only)

To stay forgiving with real-world Markdown, the parser also detects "tight" headings — consecutive # lines without blank separators — and treats each as its own heading instead of collapsing them into a paragraph.

3. Inline transformations

Once a block's type is known, the inline layer runs through the block's escaped text:

  • Bold (**...**, __...__), italic (*...*, _..._), bold-italic (***...***)
  • Strikethrough (~~...~~, GFM)
  • Inline code (`...`)
  • Links ([text](url)) and images (![alt](url))
  • Autolinks (<https://...>)
  • Escaping of stray HTML to keep the output safe

Word-boundary-aware regexes make sure snake_case_var isn't accidentally italicized and 2*3=6 doesn't get half its digits wrapped in <em>.

4. Sanitization

Before the HTML reaches the preview pane, every URL is run through a scheme allow-list. javascript:, vbscript:, and data:text/html URLs are dropped; only http, https, mailto, tel, ftp, and relative paths make it through. Raw HTML in the source is restricted to a small set of safe tags (<details>, <mark>, <sub>, <sup>, etc.) with strict attribute filtering — even inside an allowed tag, any attribute whose value contains a dangerous scheme is removed.

5. Stats and TOC

In parallel, the original source is scanned to compute live document statistics: words, characters, lines, paragraphs, headings, code blocks, links, images, tables, and an estimated reading time (220 words per minute). At the same time, every heading is recorded with its level, plain-text label, and auto-generated slug — exactly what the table of contents needs to render anchor links.

6. Theme application

The preview pane uses CSS variables (--md-bg, --md-text, --md-link, …) instead of baked-in colors. When you switch from GitHub Light to GitHub Dark, only those variables update — no re-parsing, no re-rendering, no flicker. The same Markdown produces four visibly different but identically structured previews.

7. Output

The final HTML is injected into the preview pane via React's dangerouslySetInnerHTML. Because the inline passes already escaped user content and the block layer discarded unsafe raw HTML, the only HTML reaching the DOM is HTML the pipeline itself generated. The same HTML string is also what the Copy HTML button writes to your clipboard, so what you copy is exactly what you see.

8. Privacy guarantees

There is no backend. There are no CDN calls for KaTeX, Mermaid, or highlight.js — those features are simply not loaded. Your text never travels over the network. Closing the tab discards everything.

Examples

Preview a README-style heading

Render a typical project README with a heading, a short description with inline formatting, and a fenced code block.

# my-tool

A **fast** CLI for `npm install`.

```bash
npm i -g my-tool
```
 
H1 "my-tool" with a paragraph below: the word "fast" in bold and `npm install` in inline code, followed by a labelled bash code block.

Render a GFM table with task list

Combine a task list and a pipe table in one document — common in release notes and project status updates.

## Sprint 12

- [x] Ship previewer
- [x] Add themes
- [ ] Write docs

| Task | Owner |
|---|---|
| Previewer | @ada |
| Themes | @lin |

H2 "Sprint 12", three list items (first two checked, last unchecked), then a two-column table with header "Task / Owner" and two data rows.

Auto-generated table of contents

Use the TOC feature to navigate long documents. Every heading gets an anchor link and the right-pane list scrolls to it on click.

# Handbook

## Setup

## Usage

### Basic

### Advanced

## Reference

A collapsible "Table of contents (5)" appears below the stats, listing each heading indented by level with click-to-scroll anchor links.

Frequently asked questions

Is the Markdown Previewer really free?

Yes. There is no paywall, no trial, no "premium" tier, and no account required. The tool runs entirely in your browser using a built-in Markdown parser, so there are no server costs to recoup.

Do I need to create an account?

No. You don't sign up, sign in, or hand over an email. Open the page and start typing.

Is my text kept private?

Yes — 100% private. Your Markdown is parsed locally in the browser and never sent to any server. Nothing you type is transmitted anywhere, and the previewer makes no localStorage writes. Closing the tab discards everything you typed.

Does it work offline?

Once the page has loaded, the tool continues to work without an internet connection. Because no external resources (KaTeX, Mermaid, highlight.js, fonts, themes) are loaded from a CDN, the only network request is the initial page load.

What flavor of Markdown is supported?

The parser is GitHub-Flavored Markdown (GFM). That includes:

  • ATX and setext headings
  • Ordered and unordered lists, including task lists (- [x] / - [ ])
  • Pipe tables with alignment (|---|, |:---|, |---:|)
  • Fenced code blocks with language hints (```js … ```)
  • Inline code, bold, italic, bold-italic, and strikethrough
  • Links, images, and autolinks
  • Blockquotes, horizontal rules, indented code You can toggle GFM off in the toolbar to render a stricter subset (no tables, no task lists, no strikethrough, no autolinks).

Why does the preview look different from GitHub?

The visual style is intentionally close to GitHub's Markdown rendering, but it isn't a pixel-perfect copy. The themes (GitHub Light, GitHub Dark, Solarized, Minimal) are designed to feel familiar while using the design tokens available on this site. If you want a closer match, switch to GitHub Light or GitHub Dark.

Can I export the rendered HTML?

Yes. Click Copy HTML in the toolbar to put the rendered markup on your clipboard, ready to paste into a blog, CMS, README, or chat window. The copied HTML is exactly what the preview pane is showing — no scripts, no inline event handlers.

Can I save my draft and come back later?

The tool doesn't persist your text automatically. This is a deliberate privacy choice — nothing about your draft is written to disk, cookies, or localStorage. If you need to come back later, copy the Markdown source into your clipboard, a notes app, or a file before you close the tab.

Why is my reading time showing 1 minute even for very short notes?

The reading-time estimate uses a fixed pace of 220 words per minute, rounded up to at least 1 minute for any non-empty document. A two-line note still flags as "1 min read" so the value stays useful as a relative indicator rather than vanishing entirely.

Does it support Mermaid diagrams or KaTeX math?

Not in this version. The parser keeps the Markdown source simple and fast, which means diagrams and math blocks are treated as ordinary code blocks rather than rendered visuals. If you need those features, dedicated tools like VS Code's Markdown Preview Enhanced or Typora are good companions.

What's the difference between this and other tools?

The big differences are privacy, speed, and focus:

  • Privacy — unlike other tools, this tool never uploads your text. There's no cloud sync, no Google Drive integration, no GitHub sign-in.
  • Speed — the parser is a small, dependency-free TypeScript module, so rendering is essentially instant. There's no spinner, no debounce, no "waiting for server" state.
  • Focus — this is a previewer, not an editor with file management. There are no documents to manage, no folders to sync, no permissions to configure. Just paste, preview, copy, leave.

Can I use it to preview my GitHub README?

Absolutely. Paste your README into the editor and switch to GitHub Light or GitHub Dark for the closest visual match. The Copy HTML button gives you a clean HTML version you can embed elsewhere.

How big a document can it handle?

Documents up to several hundred kilobytes render in well under a frame. Because the parser is fully synchronous and the preview uses dangerouslySetInnerHTML (no virtual DOM diffing on the rendered tree), the practical limit is the browser's HTML parser, not the tool itself.

Does the tool support keyboard shortcuts?

The editor is a standard textarea, so all of your browser's native shortcuts work: Ctrl/Cmd + A, Ctrl/Cmd + Z, Ctrl/Cmd + Shift + K (delete line in Firefox), etc. View-mode toggles are click-only because they correspond to layout changes rather than text edits.

What happens if my Markdown is broken or invalid?

The parser is permissive — it will always render something. A malformed table falls back to a paragraph; an unclosed fenced code block is closed at end of input; stray HTML is escaped or filtered. There's nothing you can paste that will break the tool or leave the preview in a broken state.

Related tools

More utilities you might find handy.

Developer

.env File Generator

Quickly generate clean, properly-quoted .env files from key-value pairs — no more quoting errors or broken deployments.
Developer

.htaccess Redirect Builder

Generate error-free Apache .htaccess code for 301 redirects, HTTPS enforcement, and canonical URL routing.
Developer

ASCII Converter – Text to ASCII, Hex, Binary & Back

Convert text to ASCII codes and decode back in decimal, hex, binary, or octal — live, private, and 100% browser-based.