Markdown live preview

Runs locally

Live GitHub-flavoured Markdown — tables, task lists, code and Mermaid diagrams.

Markdown130 words · ~1 min

Release notes — v2.4.0

A live preview of GitHub-flavoured Markdown. Everything renders locally; nothing you paste is uploaded.

What changed

  • Idempotent prerender step
  • Per-route sitemap dates
  • Incremental builds

Deploys now take about 40 seconds, down from three minutes.

Endpoint Before After
GET /orders 840 ms 120 ms
POST /orders 1.2 s 310 ms

Migration

java@Service
public class OrderService {
  private final OrderRepository repo;

  public Order find(long id) {
    return repo.findById(id).orElseThrow();
  }
}
flowchart LR
  Client -->|POST /orders| API
  API --> Queue[(Queue)]
  Queue --> Worker
  Worker --> DB[(Postgres)]

See the HTTP reference for the status codes involved.

Guide

Which Markdown, exactly

"Markdown" is not one format. CommonMark is the specification that settled the ambiguities in the 2004 original; GitHub-flavoured Markdown adds tables, task lists, strikethrough and autolinks on top of it; and every renderer adds its own extras. This preview renders GitHub-flavoured Markdown, plus Mermaid diagrams and maths, which is the combination most developer documentation is written in. To show literal tags in a document, escape them as HTML entities.

Most "my Markdown looks wrong" problems are a mismatch between the flavour you wrote and the flavour that rendered it. When a README changes, compare the two versions to see exactly what moved.

Source

A line
and another line

| Tool | Runs |
| ---- | ---- |
| JSON | yes  |

- item
    - nested?

snake_case_name

What renders

One paragraph, not two lines — in
CommonMark a single newline is a
space, not a break

A real table, because the ---- row
is present

Four spaces made a code block, not
a nested list item: two is enough

Stays literal in GFM; older parsers
italicise the middle

Where people get caught

A single newline is not a line break

In CommonMark, consecutive lines join into one paragraph. You need two trailing spaces, a backslash, or a blank line. GitHub breaks on a single newline inside issues and comments but not in .md files, which is why the same text renders differently in two places on the same site.

A table without the separator row is a paragraph

The | --- | --- | line is what makes it a table. Omit it and you get pipes on screen, which is the single most common broken table.

Four spaces of indent means code

Indent a list item by four spaces and it becomes a code block instead of a nested item. Two or three spaces is the safe nesting indent, and this is why pasted, re-indented lists sometimes turn grey.

Underscores inside identifiers

GFM leaves snake_case_name alone, but plenty of older renderers treat the inner underscores as emphasis. Wrap identifiers in backticks and the question never arises.

Raw HTML is allowed and then stripped

The spec permits inline HTML, and most hosted renderers sanitise it away — GitHub removes style, script and most attributes. Anything that depends on raw HTML will render in your editor and vanish in production.

Mermaid and maths are renderer features

A mermaid code fence is just a fenced code block to a parser that does not know about it, and $...$ maths is plain text. Both work here and on GitHub; neither is guaranteed anywhere else.

About the Markdown preview

How it works in 4 steps · 4 common use cases · 5 questions answered

How it works

  1. 1.Paste Markdown, or open a .md file from your machine — it is read locally and never uploaded.
  2. 2.The preview updates as you type, with scrolling synced between the two panes.
  3. 3.Switch to the HTML tab to read the generated markup instead of the rendered page.
  4. 4.Copy the HTML, or download a self-contained .html file that carries its own styling.

Common use cases

  • •Checking a README renders correctly before pushing it
  • •Drafting a pull request description or release notes with a table in it
  • •Turning meeting notes into an HTML file you can send to someone
  • •Sketching a flowchart or sequence diagram in Mermaid without opening a diagram tool

FAQ

Which Markdown flavour does it follow?

GitHub-flavoured Markdown: tables, task lists, strikethrough, autolinks and fenced code blocks on top of standard CommonMark.

What happens to HTML written inside the Markdown?

It is escaped and displayed as text rather than rendered. GitHub sanitises inline HTML instead; escaping is stricter, and it means a document from an untrusted source cannot run a script in your tab. If you need the HTML to render, download the file and open it yourself.

Do Mermaid diagrams cost anything to load?

Only if you use one. The diagram renderer is a large dependency, so it is fetched the first time a document actually contains a mermaid block — a document without one never downloads it.

Is the downloaded HTML self-contained?

Yes. Styles are inlined and it renders in light or dark mode, so the file works on its own with no stylesheet or network access. Mermaid diagrams are exported as inline SVG.

Is my document uploaded when I open a file?

No. The file is read in your browser with the File API, the same as pasting the text. Nothing leaves your machine at any point.

Related tools