Markdown is a format where the gap between what you write and what renders is invisible until it bites you: an extra space before a fence turns a code block into a paragraph, a missing blank line before a heading keeps it as raw text, and a pipe-table cell count that does not match the separator row drops the table silently. Markdown Previewer closes that gap in real time, rendering every keystroke without a save, a build, or a page reload.

The layout has three modes. Split puts the Markdown source on the left and the rendered output on the right so changes are legible at a glance. Editor hides the preview for distraction-free writing on a small screen. Preview hides the source and expands the formatted document to full width. All three share the same rendering pass, so switching between them never changes the output.

Getting Started: Step by Step

1. Choose a layout with the Split, Editor or Preview chip at the top. Split is the default and shows both panes simultaneously.
2. Type or paste Markdown in the editor pane. The preview updates with every keystroke; no button press is required.
3. Press Load Sample to insert the lead sample, an incident report with a level-1 heading, a numbered timeline, a blockquote, and a pipe table showing p99 latency before and after a failover. Each subsequent press of Load Sample cycles to a different document.
4. Press Copy MD to copy the raw Markdown source to the clipboard. The "Copied! 🚀" badge confirms the copy succeeded.
5. Press Clear to empty the editor. The preview shows an italic placeholder line until input is present.

Worked Example: the Incident Report

The lead sample starts with # Incident 2026-03-14 — checkout 503s. In the preview that becomes a large h1 with a bottom border rule. The line **Impact:** ~11% of checkout requests failed for 51 minutes. renders the label in bold. The four numbered timeline items become an ordered list beginning at 1. The line beginning with > The default we never changed was the one that broke us. renders as an orange-left-bordered blockquote. The pipe table with rows | Metric | Before | After | and right-aligned numeric columns (-----: separator) renders as a styled HTML table with a dark header row. The full sample is 65 words and 9 distinct Markdown block types in a single document.

What It Accepts: Supported Format Notes

• Headings — # through ######; h1 and h2 receive a border-bottom rule. Headings must have at least one space after the hash characters.
• Inline formatting: **bold**, *italic*, ***bold italic***, and `inline code`; underscore equivalents also work.
• Fenced code blocks — triple-backtick or triple-tilde fences; the language label appears in the top-right corner of the block. All whitespace and special characters inside the fence are preserved verbatim.
• Pipe tables — GFM-style, with per-column alignment via colon placement in the separator row (:--- left,:---: centre, ---: right). Ragged rows are allowed: extra cells are dropped, missing cells render empty.
• Blockquotes, unordered lists (-, *, +), ordered lists starting at any number, horizontal rules, bare URLs that auto-link, and explicit links in [label](url) syntax.

Edge Cases and Tricky Inputs

A heading line with no space after the hash characters, such as #Title, is treated as a paragraph rather than a heading. A pipe table where the separator row contains fewer columns than the header row renders with those columns having left alignment by default; the extra header cells are not dropped. Passing a complete URL into the editor renders fine, but only bare http:// or https:// URLs auto-link; a URL without a protocol passes through as plain text. Nested lists are supported to 2 levels; a third indent level is flattened to the second. An unclosed fenced code block captures everything after the opening fence, including what would have been headings, until the end of the document.