What this tool renders
Markdown is plain text with a handful of conventions: a # opens a heading, a - opens a list item, asterisks make emphasis. It reads perfectly well unrendered, which is why it ended up carrying READMEs, changelogs, issue threads and documentation.
# Release notes → a level-one heading, with an anchor id of release-notes derived from its own text
The trouble is that every renderer disagrees slightly about the edge cases, so the only way to know how a document will look is to look at it. This preview follows CommonMark with the GitHub extensions on top — tables, strikethrough, task lists, autolinks and alerts — plus the two things GitHub also renders: Mermaid diagrams from a fenced block labelled mermaid, and LaTeX maths between dollar signs. Everything runs in this tab, so an unreleased changelog or an internal runbook is safe to paste, and the tool keeps working with the network off.
Syntax reference
Everything the preview understands, in one table. Anything not listed here is passed through as ordinary text rather than silently dropped.
| Write | Get |
|---|---|
# Title ###### Smallest | Six heading levels. Each one gets an anchor id derived from its text, so headings are linkable. |
**bold** _italic_ ~~struck~~ | Bold, italic and strikethrough. Underscores are used for italics because GFM will not apply them inside a word. |
`inline` | A run of code inside a sentence, left exactly as typed. |
```ts const a = 1; ``` | A code block. The word after the fence names the language and is shown as a label; it is not syntax-highlighted. |
[label](https://example.com "title") | A link, with an optional title shown on hover. Links open in a new tab. |
 | An image, capped at the width of the column. |
- one
- two
- nested | A bulleted list. Indent by four spaces to nest. |
1. one 2. two | A numbered list. It starts at whatever number you write, not always at one. |
- [x] done - [ ] todo | A task list, rendered as read-only checkboxes. |
> quoted | A blockquote. Prefix the first line with an alert marker to get a callout instead. |
| a | b | | :-- | --: | | 1 | 2 | | A table. The colons in the separator row set each column's alignment. |
--- | A horizontal rule. |
\*not emphasis\* | A backslash keeps the next punctuation mark literal instead of letting it start a formatting run. |
— … | HTML character references are resolved to the characters they name, for the common ones. |
Reference-style links, autolinks, hard line breaks (two trailing spaces) and nested block structures all work as CommonMark specifies. Footnotes and definition lists do not — they are extensions no two renderers agree on.
Every control
Ten controls, and the one that only makes sense with both panes visible goes quiet when they are not.
| Control | What it does | Reach for it when |
|---|---|---|
| Panes | Shows the editor, the preview, or both side by side. | You want the full width for one of them — writing on a phone, or reading a long document. |
| Sync scroll | Keeps the two panes at the same fraction of their own scroll range. | You are editing a long document and want the preview to follow the cursor's part of it. |
| Full screen | Opens the editor and preview over the whole window, with the navigation, the article and the page padding hidden. | You are writing rather than browsing, and want every pixel going to the two panes. |
| Toolbar | Applies markdown to the selection, and takes it off again if it is already there. | You would rather not remember which characters wrap which effect. |
| Keyboard shortcuts | Ctrl/Cmd + B for bold, I for italic, K for a link, applied to the selection. | Your hands are already on the keys. |
| Reset | Replaces the document with the sample one this page opened with. | You want the syntax examples back after clearing them. |
| Copy | Copies the markdown source, not the rendered output. | You are moving the document into a README, an issue, or a pull request. |
| Markdown | Downloads the source as a timestamped .md file. | You want the file itself, exactly as typed. |
| HTML | Downloads the rendered document as a standalone .html file with its own stylesheet. | You need something that opens in a browser without this tool. |
| Print / PDF | Opens the browser's print dialogue with only the preview on the page. | You want a PDF — every browser can print to one. |
Both panes stay mounted whichever view is chosen, because Print and the HTML export read the rendered preview. Choosing Editor hides the preview rather than throwing it away, so both still work.
Full screen is a dialog, so Escape closes it and focus stays inside while it is open. Moving in or out rebuilds the two panes; the caret is carried across and drawn diagrams are reused, so neither is lost on the way.
The HTML export carries a small stylesheet of its own and honours the reader's light or dark preference. A document containing maths also links KaTeX's stylesheet from a CDN — that one file is the only thing an exported document ever fetches. Mermaid diagrams are exported as inline SVG and need nothing at all.
The tool opens split, with scroll linking on and the sample document loaded. A ?text= link opens with that content instead, and ?view= and ?sync= override the two switches — a malformed value falls back to the default rather than to an error.
Mermaid diagrams
A fenced block labelled mermaid is drawn as a diagram instead of shown as source. Flowcharts, sequence diagrams, class diagrams, state diagrams, entity-relationship diagrams, Gantt charts and pie charts are all supported, and the diagram follows the site's light or dark theme.
Mermaid measures rendered text to lay a graph out, so it can only run in a browser. It is also about a megabyte of JavaScript, which is why it is loaded on demand: a document with no mermaid fence never downloads it. That is also why a diagram appears a moment after the rest of the page rather than in the first paint.
Labels are escaped rather than rendered as HTML, so a diagram cannot smuggle markup into the page. If a diagram fails, the error Mermaid reported is shown in place of it — usually a typo in the node syntax rather than anything structural.
```mermaid
flowchart LR
A[Start] --> B{Works?}
B -->|Yes| C[Ship]
B -->|No| D[Debug]
D --> B
```LaTeX maths
Text between single dollar signs renders inline; text between double dollar signs renders as a centred display equation. Rendering is done by KaTeX, which covers the LaTeX subset used for mathematical notation — fractions, sums, integrals, matrices, Greek, operators, and the rest.
Maths is claimed before the ordinary formatting rules run, which is the part that matters: without it, \frac{a}{b} would lose its braces to escape handling and x_1 … x_2 would turn into italics halfway through the formula.
A dollar sign followed by a space or a digit is left alone, so prices survive: $5 and $10 stay currency. Every equation also emits MathML alongside the visual output, which is what a screen reader reads aloud. Broken TeX shows the source in red with KaTeX's own message on the tooltip instead of blanking the paragraph around it.
Inline: $E = mc^2$
$$\sum_{i=1}^{n} i^2 = \frac{n(n+1)(2n+1)}{6}$$GitHub alerts
A blockquote whose first line is an alert marker becomes a coloured callout, the same five GitHub renders.
| Marker | Renders as | Use it for |
|---|---|---|
| > [!NOTE] | Note | Something worth knowing that does not change what the reader should do. |
| > [!TIP] | Tip | A shortcut or a better way of doing the thing being described. |
| > [!IMPORTANT] | Important | Something the reader has to know to get the right result. |
| > [!WARNING] | Warning | A consequence that is easy to walk into and annoying to undo. |
| > [!CAUTION] | Caution | A risk with real cost — data loss, downtime, money. |
The marker has to be the first thing inside the blockquote, on its own line, in capitals. Anything else in that position is left as ordinary quoted text, which is why a blockquote starting with [!SHOUT] renders as a plain quote rather than an error.
Why raw HTML is shown as text
Most markdown renderers pass HTML straight through. This one does not: an <img> or a <div> in the source is printed as the characters you typed, in a dashed box, rather than becoming an element.
The reason is that this page accepts a document from a link. A ?text= parameter is convenient for sharing a draft, and it is also a way to hand someone a URL that runs script on this origin the moment they open it. Printing HTML instead of running it closes that off completely, rather than relying on a filter to catch every variation.
The same reasoning applies to links and images. A javascript: link is rendered as its own label with no link at all, and an SVG data: URL — SVG can carry script — is rendered as its alt text. Ordinary http, https, mailto, tel and relative links are untouched, as are inline PNG, JPEG, GIF, WebP and AVIF data URLs.
One trade-off worth naming: remote images are fetched from wherever the document points, so a preview of someone else's markdown will contact those hosts. Nothing is sent to this site either way — but a third-party image server does learn that you loaded its file.
What people use it for
Checking a README before pushing it. GitHub renders on the server, so the usual loop is commit, look, fix, commit again. Pasting the file here shows the tables, alerts, task lists and diagrams the way they will appear, in one pass.
Writing documentation with diagrams in it. A flowchart written as six lines of Mermaid stays in version control, reviews as a diff, and never goes stale the way an exported PNG does — and this is where you find out whether it lays out the way you pictured.
Turning notes into something to hand over. Write in markdown, then export the rendered document as HTML for someone without the tool, or print it to PDF for a report or a handout.