How to preview Markdown files online, with tables, Mermaid and maths

Preview a Markdown file in a minute

1. Open the viewer. It works in any modern browser, on a computer or a phone. Nothing to install.
2. Open the .md file or paste the text. Choose the file from your device, or paste Markdown, a README or an AI answer into the editor.
3. Read the preview. It updates as you type. Headings get anchors, so links within the document work.
4. Export if you need to. Copy it as rich text for Word or Google Docs, download HTML, or save it as a PDF.

Previewing is different from editing on GitHub or in an editor: you see the document the way a reader will, which is when broken tables, unclosed code blocks and diagrams with errors become obvious.

A test file that shows what a previewer supports

Markdown comes in flavours. The core, CommonMark, has no tables at all; tables, task lists, strikethrough and footnotes are GitHub extensions, and Mermaid and maths are extensions on top of those. Paste this file into any previewer to see which parts it understands:

# Preview test

| Feature | Status | Notes |
|---|:---:|---:|
| Table | done | 3 columns |
| Pipe \| in a cell | done | escaped |

- [x] Task list item, done
- [ ] Task list item, open

~~Strikethrough~~ and a footnote.[^1]

Inline maths $a^2 + b^2 = c^2$, and a price: it costs \$5.

$$
\int_0^1 x^2 \, dx = \frac{1}{3}
$$

```mermaid
flowchart LR
    A[Write] --> B[Preview] --> C[Share]
```

```js
console.log("code block");
```

[^1]: Footnotes are a GitHub extension.

In the Markdown viewer, every part renders: a three-column table with a real pipe in one cell, two checkboxes, a footnote link, typeset formulas, a small flowchart and a highlighted code block. The \$5 stays a dollar sign. A previewer that shows rows of pipes, a ```mermaid block as code, or dollar signs around raw TeX doesn't support that extension.

What renders where

Support changes over time, so when a document must look right somewhere specific, test it there. GitHub, for example, documents which Mermaid version it uses: a mermaid block containing only the word info shows it.

Previewing private files

Some online previewers send your text to their server to render it. That matters for internal documentation, contracts written in Markdown, or AI answers containing customer data. A previewer that renders in the browser never needs to. You can check: open your browser's developer tools on the Network tab, paste some text and watch whether a request carries it.

The Markdown viewer here also holds back images linked from other websites until you press Show images, because loading an image tells that website your IP address. Images embedded in the file as data URLs show straight away.

Common problems and fixes

• The table shows as lines of pipes. GitHub's documentation asks for a blank line before the table and at least three hyphens in each cell of the dashes row. The header row and the dashes row must also have the same number of cells.
• Images are missing. A relative path such as images/chart.png only works next to the folder it points to. Pasting the text alone leaves the images behind.
• Prices turned into maths. Two dollar signs on one line can be read as a formula. Write \$5 for a literal dollar sign.
• Everything after a code block looks like code. A ``` fence wasn't closed. Count the fences; AI answers cut off mid-reply often end inside one.
• The diagram shows an error. Open it in the Mermaid editor, which shows the line and the token it didn't expect.

When the preview looks right and you need the HTML for a website or an email template, Markdown to HTML gives you clean markup.

Sources

• GitHub Flavored Markdown spec. Tables, task lists, strikethrough and autolinks
• GitHub Docs: Organizing information with tables
• GitHub Docs: Writing mathematical expressions
• GitHub Docs: Creating diagrams
• Visual Studio Code: Markdown. Built-in Mermaid and KaTeX
• GitLab Docs: GitLab Flavored Markdown