Markdown Live Preview

What Markdown is, and why a live preview matters

Markdown is a plain-text formatting syntax invented so that documents stay readable as raw text while still converting cleanly to HTML. You write **bold** instead of <strong>bold</strong>, and a tool turns the shorthand into real markup. The catch is that the shorthand and the result are two different things: a stray space, an unclosed asterisk, or a missing blank line can silently change how your text renders. A live preview closes that gap by parsing your text on every keystroke and showing the rendered output beside the source, so you catch a broken list or a half-italic sentence the instant you type it rather than after you publish.

How this previewer parses your text

The parser works in two passes. First it protects the things that must not be reformatted: inline code wrapped in backticks and fenced code blocks wrapped in triple backticks are pulled out and replaced with placeholders, so an asterisk inside `a*b` is never mistaken for emphasis. Then it walks the document line by line, deciding what each line is: a line starting with one to six # characters becomes a heading of that level; a line of --- becomes a horizontal rule; lines starting with > are gathered into a blockquote; -, *, or + start an unordered list, and 1. an ordered one. A line containing | followed by a separator row like |---|---| is treated as a table. Anything else accumulates into a paragraph. Finally, inline rules run on each chunk to convert bold, italic, strikethrough, links, and images, and the protected code is put back. Everything you type is HTML-escaped first, which is why the preview shows your text safely rather than executing it.

A worked example

Suppose you type this into the editor:

• ## Shopping
• - Milk
• - **Eggs** (a dozen)

The parser reads line one, matches the ## pattern, and emits an <h2>Shopping</h2>. It reaches line two, sees the - bullet, and starts collecting list items; line three continues the same list, so both become <li> elements wrapped in a single <ul>. While building the third item, the inline pass spots **Eggs** and converts it to <strong>Eggs</strong>. The preview pane updates immediately, and the word-count readout recomputes — splitting your text on whitespace — to show something like 5 words · 41 chars.

Common mistakes the preview helps you catch

• No blank line before a list or table. Many Markdown features need an empty line above them to be recognised. If your bullets render as one run-on paragraph, add a blank line before the first item.
• Tables without a separator row. A table is only detected when the line after the header matches a row of dashes and pipes such as |------|------|. Forget it and the whole thing renders as plain text with visible pipes.
• Unbalanced emphasis markers. A single stray * can swallow the rest of a line into italics. The live preview makes this obvious at a glance.
• Expecting deep nesting. This is a lightweight parser focused on the common cases; deeply nested lists or block elements inside list items render flatter than a full CommonMark engine would. Keep structures shallow for predictable output.

Practical tips

• Use the "Copy HTML" button to move content elsewhere. It copies the generated HTML — not the Markdown — so you can paste working markup straight into a CMS, an email template, or a static site.
• Specify a language on code fences. Writing ```python adds a language-python class to the output, which downstream syntax highlighters can pick up.
• Toggle the dark preview before exporting. If the text is destined for a dark interface, previewing on a dark background reveals contrast problems that a white preview hides.
• Trust the word counter for drafts. It counts the raw Markdown including syntax characters, so it is a fast running estimate rather than an exact published-word figure.

Where it runs and what happens to your text

The entire parser runs in your browser as JavaScript — there is no server round-trip, so the preview keeps working with your network disconnected. Your draft is auto-saved to the browser's localStorage under a single key, which is why your content survives a page refresh. That storage lives only on your own device; clearing your browser data or opening the tool in a private window with no prior history starts you with the default sample document. Because nothing is uploaded, this is a safe place to draft notes or documents that contain information you would not want to send to a third-party service.