Writing Markdown without seeing the rendered output makes it hard to catch broken links, mismatched code fences, or formatting mistakes until they show up live.

This previewer takes Markdown on the left and renders HTML on the right in real time as you type. It supports the standard CommonMark spec plus GitHub Flavored Markdown extensions (tables, task lists, autolinks, fenced code blocks, strikethrough). Code blocks get syntax highlighting for common languages. Math is supported via LaTeX-style $...$ and $$...$$ blocks if you toggle that on.

The preview updates in real time as you type, which makes it a useful scratchpad for drafting blog posts, READMEs, or documentation. Output can be copied as HTML or as the original Markdown — useful when pasting into apps that accept either format. No data is sent anywhere; the rendering happens entirely in your browser.

The rendering pipeline is two stages: parse Markdown to a syntax tree, then walk the tree emitting HTML. The parser implements CommonMark — the de-facto Markdown standard with consistent rules across implementations — plus GitHub Flavored Markdown extensions. Tables, task lists ([ ] and [x]), strikethrough (~~text~~), autolinks (URLs without brackets), and fenced code blocks all work. Code syntax highlighting uses a lightweight library that handles the major languages. Math rendering uses KaTeX, which is fast (faster than MathJax) and supports most common LaTeX math syntax.

The pain this addresses: writing Markdown without seeing the output produces formatting bugs that show up only after publishing. Mismatched code fences turn the rest of your document into one giant code block. Wrong heading levels disrupt the document outline. Broken link syntax shows literal brackets in the rendered page. The preview shows these as you type, so the feedback loop is short — you fix issues immediately rather than discovering them after pushing to production.

Worked example: type '# Hello\n\n**bold** and *italic* and `code`.\n\n[link](https://example.com)\n\n```python\nprint("hello")\n```'. The preview renders this as a heading, a paragraph with formatting, a clickable link, and a syntax-highlighted code block. The Markdown source stays editable; the preview updates per keystroke. Copy the rendered HTML directly to paste into a CMS that wants HTML rather than Markdown. Or copy the original Markdown to commit to a repo that prefers source format.

Where Markdown gets weird: tables. The pipe syntax (| col1 | col2 |) is verbose to type and visually messy. Tools like the Markdown table generator (which is a separate task) produce them faster. Footnotes are extension territory — supported here but inconsistent across renderers. Reference-style links (using [name][ref] with the URL defined elsewhere) work but are less common than inline. The preview supports all of these with reasonable behavior, but if your output is being consumed by a tool that doesn't support GFM extensions, restrict yourself to vanilla CommonMark to maximize portability.