Markdown Preview

About This Tool

The left pane is the editor, the right pane renders as you type — full GFM support: tables, task lists, footnotes, KaTeX math formulas, and Mermaid diagrams, rendering the same way GitHub renders them. Open a local .md file in Chrome or Edge (Sync file) and the preview follows changes you save in your editor, then writes yours back when you say so. For plain two-text comparison there is Text Diff and Text Merge.

Everything runs locally: files are read from disk by the page itself, nothing is uploaded, and there is no account. Copy a .md from Explorer and press Ctrl+V, or drag one onto the editor to load it.

How To Use

1. Type or paste markdown on the left — the right pane re-renders as you type (tables, task lists, footnotes, code, math formulas, Mermaid diagrams). The formatting row above the editor wraps your selection in bold, italic, code, links, lists, quotes, tables, and more — plain markdown syntax, fully portable.
2. Watch a real file (Chrome/Edge/Opera): click Sync file and pick a .md from disk. Save it in VS Code or any editor and the preview refreshes on its own.
3. Work with a folder (Chrome/Edge/Opera): Sync folder asks once for the folder; its .md files (top level plus one subfolder level) appear in a switcher — jumping between them needs no extra permission — and relative-path images inside that folder render in the preview.
4. Edit and write back: Save to file (or press Ctrl+S) writes your edits to the same file (it asks for write permission on that click). Auto-save repeats that about two seconds after you stop typing — off by default, your call.
5. Other browsers: Open file (no sync) loads a one-time snapshot; use Reload file to re-read the latest from disk after editing it elsewhere.
6. Big documents: the status line always names the active behavior. The Large documents selector switches between Auto (throttle ≥200 KB, bounded >500 KB), Always complete (no bound), and Always bounded (bounded on every large file).
7. Navigate long documents: on a ≥1440px viewport with three or more headings, an On this page outline column appears beside the preview — it follows your scroll position and clicking an entry jumps to that section (switch it off in the View options).
8. Export any time from the Export menu above the preview: Copy Markdown, Copy HTML, Download .md, Download .html (a single styled file that looks exactly like the preview), or Download image (.png) (a PNG of the preview — same theme, same layout; images that cannot be fetched are marked and reported, never silently dropped). Print / PDF… opens the browser's print dialog — choose "Save as PDF" there.

Usage Example

This markdown source:

| Layer | Tool |
| ----- | ---- |
| Edit  | left pane |
| Read  | right pane |

- [x] tables render
- [ ] try your own file

…renders as a two-column table, then a task list whose first row shows a checked box. Add a fenced ```mermaid block with graph LR; A-->B and a flowchart appears — drawn only when it scrolls into view.

Use Cases

Draft README files and see exactly what GitHub will show before you push — the GitHub theme mirrors github.com's rendering. Keep a documentation folder open in the folder mode and hop between pages while the files stay in your editor's workflow. Paste API responses into JSON Viewer or JSON Formatter when a doc's examples are JSON, and diff two revisions of a doc with Text Diff.

Best Practices

• Tables: pad pipe characters with spaces so rows line up in the source — it renders the same but stays editable. A header row and a | --- | separator row are required.
• Task lists: - [x] for done, - [ ] for open — the same syntax GitHub issues and pull requests understand, so lists copy back and forth losslessly.
• Mermaid: the bundled renderer is recent and strict; if a diagram fails you'll see the error and the source right where the diagram would be — fix the syntax and it redraws. Keep diagram syntax valid on GitHub too by testing there once.
• Paste as plain text by design: pasting from Word, Excel, or a browser page brings only the plain-text stream — no hidden styling, no clipboard HTML. Shape tab-separated cells into a | a | b | table yourself, and rely on the preview's escaping: pasted content can never smuggle markup or formats into your document.
• Math formulas: $inline$ and $$display$$ render via bundled KaTeX (offline, no CDN, \def macros included). A formula KaTeX cannot parse shows an error box with your original LaTeX in place — fix the command and it re-renders on the next keystroke.
• Sensitive content: everything runs locally, but the safest workflow for private documents is Open file + Auto-save: your text lives on disk only, and even the draft copy can be cleared from the Privacy page.
• Cloud-synced folders (OneDrive/Dropbox): external-change detection is fastest on local disks; sync clients can delay file timestamps, so treat watching there as best-effort and use Reload file when in doubt.

GFM Syntax Cheat Sheet

Frequently Asked Questions

Is my markdown uploaded to a server?

No. Rendering, the editor, and every file operation run entirely in your browser. Typed text never leaves the page, and files opened through the local-file feature are read directly from your disk by the browser itself — the file handle stays on your device and no content is transmitted anywhere.

What is GitHub Flavored Markdown (GFM) and what does this tool support?

GFM is the markdown dialect GitHub uses, on top of standard CommonMark. This tool renders GFM tables (pipe-aligned rows), task lists (- [x] checkboxes), strikethrough (~~text~~), footnotes ([^1] references), and automatic linking of bare URLs — the same set github.com renders, plus fenced code blocks with language labels and Mermaid diagrams.

How does the local file watching work?

In Chrome, Edge, or Opera, Sync file asks for permission once and keeps a live connection to the file on your disk. The page watches the file (push notifications where available, otherwise a light 1.5-second check): save the file in VS Code or any editor and the preview refreshes on its own. If you also pick "Allow on every visit" in the browser permission prompt, the connection survives closing the tab.

Why does my browser say it can't watch files?

Live file watching and saving back to disk use the File System Access API, which is currently supported in Chromium browsers (Chrome, Edge, Opera) — roughly three quarters of desktop users. Firefox and Safari deliberately do not implement it yet. There, Open file (no sync) loads a one-time snapshot instead: edit, use Reload file to re-read the latest from disk, or use Export to get your changes out.

Can I edit the file and save it back to disk?

Yes, in Chrome/Edge/Opera. Save to file asks for write permission when you click it and writes the content back to the same file. Auto-save to file is a checkbox that is off by default: when you tick it, the browser asks for write permission at that moment, saves immediately once, and then writes your changes about two seconds after you stop typing. If a write fails, you get an explicit error and the checkbox switches itself back off. In Firefox/Safari, use Download .md instead.

What happens if I edit here AND the file changes on disk at the same time?

Your edits are never overwritten automatically. If you have unsaved edits here when the file changes on disk, the status bar turns into a conflict prompt with two explicit choices: Keep my edits (your version stays, the disk change is noted) or Use file version (the editor takes the disk content). If the editor has nothing unique of yours, the new file content is applied automatically and the preview just updates.

What if the browser crashes or I close the tab by mistake?

Draft rescue has you covered: everything you type is saved to this browser's local storage about every 0.8 seconds (when you pause). Reopen the page and the unsaved draft comes back automatically, with a visible notice telling you it was restored — you can clear it from the same notice. The draft stays on your machine; nothing is uploaded.

Is Mermaid rendering safe?

Yes. Diagrams render with Mermaid's strict security mode (HTML labels encoded, click interaction disabled), and the resulting SVG is passed through DOMPurify a second time with an SVG-only allow-list before it touches the page. Diagrams load only if your document actually contains a mermaid block, and the library is bundled with the page — no CDN, no network requests.

How large a document can it handle?

Comfortably past sizes most online editors choke on. Up to 200 KB the preview updates about 150 ms after you stop typing. From 200 KB to 500 KB the pause widens to half a second and the status line says so. Beyond 500 KB the preview shows the first 2,000 blocks with a "Showing first 2,000 of N blocks" notice and a Show all button — truncation is always announced with exact numbers, never silent. The Large documents selector above the editor puts you in control: Auto follows those thresholds, Always complete renders the full document (slower on huge files), and Always bounded keeps the preview bounded on every large document.

What do the formatting buttons do?

They insert the matching markdown syntax around your selection (or a placeholder when nothing is selected): bold **text**, italic *text*, inline `code`, [label](url) links, headings, bullet/numbered/task lists, blockquotes, fenced code blocks, a table skeleton, and a horizontal rule. They write plain markdown into the file — no hidden markup — so the result stays fully portable. Ctrl+B and Ctrl+I work as keyboard shortcuts.

Do the preview themes match GitHub exactly?

The GitHub (light) theme is aligned with how github.com renders README files — same system font stack, table borders, code block background, and checkbox styling. The VS Code (dark) theme mirrors VS Code's built-in markdown preview dark colors, and the Plain theme is a deliberately neutral serif document style (no brand colors — closest to how commonmark.org renders its spec). They are close visual matches, not pixel-for-pixel clones of any product's internal CSS.

Where is my data stored, really?

Three honest layers. Your text: a draft copy in this browser's local storage on your machine (the Privacy page lists it and can clear it). Opened files: they stay on your disk — the browser reads them locally. A server copy: there is none. Clearing browser data wipes the draft, so anything you care about should live in a real file — open one and save back to it.

Does it work offline?

Yes, once the page is loaded. The editor, renderer, sanitizer, and diagram library are all bundled into the page itself — there is no CDN dependency and no runtime network request. If the site were to disappear tomorrow, saving the page and reopening it locally would still give you a working editor and preview.

Why are images in my file not showing?

A browser tab cannot reach arbitrary files on your disk, so relative paths like ./img/photo.png cannot resolve by default — the tool shows a dashed placeholder box explaining exactly that instead of a silent broken image. Three ways to see real images: reference a full https:// URL, embed them as data URIs, or use Sync folder (Chrome/Edge) and grant the folder that contains both the .md file and the images — relative paths then resolve locally.

How is this different from StackEdit or Dillinger?

Those tools import your document into their world — browser storage or a cloud account — and syncing back is where they historically lose data. This tool works the other way around: your files stay where they are, on disk, and the page is a live view of them. No account, no OAuth prompt, no cloud copy that can go stale, no storage your browser can silently clear. Open a file, edit, watch it sync with your editor, and save — with the disk as the single source of truth.

How do I write math formulas?

Wrap inline math in single dollars ($e^{i\pi}+1=0$) and display math in double dollars ($$…$$, opening and closing each on their own line). Formulas render with KaTeX, bundled into the page — no CDN, works offline, and \def macros work. KaTeX covers the common LaTeX math subset (the supported-command list lives at katex.org/docs/supported); anything it cannot parse shows an explicit error box with your original LaTeX right in the preview — never a silent blank block.

What happens when I paste from Word, Excel, or a web page?

The editor deliberately takes the plain-text clipboard stream only — colored spans, hidden styles, and embedded clipboard HTML never enter your document. That keeps the markdown clean and portable: paste from Excel and you get tab-separated plain text you can shape into a pipe table, and the preview escapes any raw HTML besides, so pasted content can never inject markup or formatting you did not write.

Does it have a table of contents or outline?

Yes — from a 1440px-wide viewport, when the rendered preview contains at least three headings (H1–H3), a dedicated "On this page" outline column appears beside the preview: it highlights the section you are currently reading as you scroll, and clicking an entry scrolls the preview there (the editor follows via Sync scroll). It is a real layout column, not a floating overlay — it never covers the preview or its scrollbar. Click the column header to collapse it to a slim rail (state remembered), turn it off entirely with the Outline checkbox in the View options; on narrower viewports and in single-column layouts it stays out of the way.

Does it work on phones and tablets?

Yes, with explicit boundaries: the layout stacks into a single column (editor above the preview), and the file-watching workflow needs a desktop Chromium browser, so on mobile you get the one-shot Open file (no sync) loader plus paste and drag-drop instead. Sync scroll turns itself off in the stacked layout. Nothing degrades silently — each unavailable capability explains itself in its tooltip or in a message, rather than a button that pretends to work.