Markdown Preview

Markdown is a lightweight markup language designed by John Gruber and Aaron Swartz in 2004 that converts plain text to HTML using punctuation conventions: pound signs for headings, asterisks or underscores for emphasis, backticks for code, and so on. It powers READMEs on GitHub, documentation sites built with Docusaurus or MkDocs, static blog generators like Hugo, and the issue trackers of nearly every modern dev platform.

This previewer is built on marked, a fast, spec-compliant Markdown parser written in JavaScript. We configure it with gfm: true and breaks: true so it follows the GitHub Flavored Markdown extensions (tables, task lists, autolinks, strikethrough, fenced code blocks) and treats single newlines as line breaks the way GitHub comment fields do. The parser turns your input into an HTML string that React inserts into the preview pane.

Conversion runs on every keystroke through a useMemo hook, so what you see in the preview always matches the latest source. Marked is fast enough that documents in the tens of thousands of words still parse in a few milliseconds; for very long documents you may notice slight typing latency because the entire string is reparsed each time.

Be aware of a security caveat: marked produces raw HTML, and we render it through dangerouslySetInnerHTML for fidelity. That means script tags or onerror handlers in your Markdown could execute. This is fine for content you wrote yourself, but if you ever paste Markdown from an untrusted source you should sanitize the output with DOMPurify before rendering. The exported .html file inherits the same caveat — check it before publishing.

GFM tables expect a header row, a divider row of dashes, and pipe-separated cells; uneven columns silently misalign rather than erroring. Code fences accept an optional language tag (```js) but this previewer does not currently apply syntax highlighting. The exported HTML uses minimal inline styles for legibility, not the GitHub theme — drop in a stylesheet like github-markdown-css if you want pixel-perfect parity.

Statistics shown above the editor (words, lines, characters) are computed from the raw Markdown source, not the rendered HTML. The word count splits on whitespace via a regex (split(/\s+/)), so it counts "Hello, world!" as two words. Character count includes Markdown syntax characters, which can be useful when targeting platforms with character limits like GitHub commit messages or Twitter.

Everything happens in your browser. The parser bundle, your input, and the rendered HTML never leave the page; closing the tab discards them. There is no autosave, so if you are drafting something important, copy it into a file or use the Save .md button periodically.