Skip to content

Markdown Previewer

Preview common Markdown formatting as you type, switch themes, check document stats, and copy the rendered HTML.

Updated

What is the Markdown Previewer?

Paste or write Markdown in the editor and see a live preview beside it. Switch between split, edit, and preview views, choose from four themes, and copy the rendered HTML when you need it elsewhere.

The previewer supports common Markdown formatting, including headings, lists, links, code blocks, and GitHub-style tables and task lists. It also shows basic document statistics and a table of contents for headings. It is a lightweight previewer rather than a complete GitHub renderer, so some Markdown features and styling may look different from the final destination.

Your Markdown is rendered in your browser and is not uploaded by the previewer. The page itself may still make normal site requests, such as analytics where enabled.

How it works

  1. Enter Markdown — Type or paste your text in the editor, or select Load sample to try an example.
  2. Choose a view and theme — Use Split to see the editor and preview together, or switch to Edit or Preview. Pick a theme from the menu.
  3. Review the result — Common formatting such as headings, lists, links, code blocks, and GitHub-style tables appears in the preview. The stats and table of contents update with your document.
  4. Copy the HTML — Select Copy HTML to copy the rendered markup.

The previewer supports a useful subset of Markdown, not every feature or styling detail available on GitHub. For example, it does not render Mermaid diagrams or math, and its handling of more complex Markdown may differ from other previewers. The GFM button toggles tables, task lists, strikethrough, and autolinks.

The previewer processes your Markdown in the browser. It does not save drafts automatically, so copy or download your source elsewhere if you want to keep it.

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 (6)" 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. You can use the previewer without an account or subscription.

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?

The previewer processes your Markdown in the browser and does not upload the text. Drafts are not saved automatically, so copy your source elsewhere before closing the page if you need to keep it.

Does it work offline?

The previewer does not need a server to render Markdown after the page has loaded. Whether the page continues to be available offline depends on your browser's cache and connection; the site may also make normal requests such as analytics where enabled.

What flavor of Markdown is supported?

The previewer supports common Markdown syntax and selected GitHub-Flavored Markdown (GFM) features:

  • 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 Use the GFM button to turn tables, task lists, strikethrough, and autolinks on or off. This is a lightweight renderer, not a complete implementation of every CommonMark or GFM feature.

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 estimate assumes 220 words per minute and rounds to the nearest whole minute, with a minimum of 1 minute for any non-empty document. It is a rough guide, especially for short notes.

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 does the previewer include?

It provides a live preview, four themes, basic document statistics, a table of contents, and a Copy HTML option. Markdown is rendered in your browser, but drafts are not saved automatically.

Can I use it to preview my GitHub README?

Yes. Paste the README into the editor and choose GitHub Light or GitHub Dark for a familiar look. The preview may differ from GitHub, especially for features the tool does not support. Copy HTML copies the rendered markup.

How big a document can it handle?

There is no fixed document-size limit in the interface, but very large documents may slow down live preview because the page renders as you type. If that happens, try a smaller section at a time.

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 previewer tries to show a result even when Markdown is incomplete. An unclosed fenced code block continues to the end of the text, and malformed or unsupported syntax may display differently than expected. Review the preview before copying the HTML.

Related tools

More utilities you might find handy.

Markdown

Markdown Table Generator

Create Markdown tables in a visual grid, set column alignment, and import CSV data.
Markdown

Markdown to Plain Text

Remove common Markdown formatting and convert headings, lists, links, and tables to readable plain text.
Developer

.env File Generator

Generate .env files from key-value pairs with configurable quoting; verify the output with the parser used by your application.