Markdown Previewer guide
Draft README files, docs, notes, and forum posts with an instant preview. Supports the everyday Markdown and GitHub-style features: headings, emphasis, links, images, lists, task lists, tables, blockquotes, and fenced code blocks.
Markdown in two minutes
Markdown is plain text with a few conventions that turn into formatting. John Gruber created it in 2004 so people could write for the web without typing HTML tags. Today it is the default for README files on GitHub and GitLab, documentation sites, Reddit and Discord messages, note apps like Obsidian and Notion, and a lot of static site generators, including Astro, which powers this site.
The core syntax fits on an index card. # starts a heading (more #s mean smaller headings). *italic* and **bold**. `code` for inline code. [text](https://example.com) for a link, and the same with a leading ! for an image. - or * starts a bullet, 1. starts a numbered item. > starts a blockquote. Three backticks open and close a code block. A blank line separates paragraphs.
How the previewer renders your text
The previewer reads your text line by line and groups lines into blocks: headings, code fences, blockquotes, lists, tables, horizontal rules, and paragraphs. Inside each block it applies inline rules for code spans, links, images, bold, italic, and strikethrough. Code spans are protected first, so a * inside backticks stays a literal asterisk instead of starting italics.
Everything is HTML-escaped before formatting is applied. If you type <script>, you see <script> as text rather than running it, and links are limited to http, https, mailto, and relative URLs. That is a deliberate safety choice: you can paste Markdown copied from an issue tracker or a stranger's gist without worrying about what it contains.
Worked example: a README section
Type ## Install, a blank line, then a fenced block opened with ```bash containing npm install mavis-cli, then close the fence. Below it, add - [x] Node 18+ and - [ ] Windows support. The preview shows an H2 heading, a monospaced code block tagged language-bash, and a two-item checklist with one box ticked. That is exactly the structure GitHub shows on a repository page.
Add a table: | Command | What it does | on one line, | --- | --- | on the next, then | mavis init | Creates a config file |. Put a colon on the right side of the divider, like ---:, to right-align a column of numbers. Tables are the feature people most often get wrong, because the divider row is required: without it you just get a paragraph full of pipes.
CommonMark, GFM, and why renderers disagree
Gruber's original Markdown description left many edge cases ambiguous, so different tools rendered the same text differently. CommonMark, launched in 2014, is a precise specification of the core syntax. GitHub Flavored Markdown (GFM) is a strict superset of CommonMark that adds tables, task lists, strikethrough, and autolinks.
This previewer covers the common subset of CommonMark plus the GFM extensions people use daily. It does not render footnotes, definition lists, emoji shortcodes such as :tada:, @mentions, math blocks, Mermaid diagrams, or nested lists. For those, preview on the platform you publish to, because even full-spec renderers differ on extras.
Mistakes that break formatting
No blank line before a list or heading: many renderers treat the line as part of the previous paragraph, so add one even though this previewer is forgiving. Expecting a single line break to show: Markdown joins lines in a paragraph, so end the line with two spaces or a backslash. Unclosed code fences: forgetting the closing ``` turns the rest of the document into code. Spaces inside link syntax: [text] (url) with a space is not a link. And underscores in words: snake_case_names stay as-is here, but some older renderers turn them into italics, so wrap identifiers in backticks.
Private by default
The whole renderer runs in your browser. Nothing you type is sent to a server, which matters when you are drafting internal docs, incident notes, or unreleased product copy. You can also go offline after the page loads and keep working.
How we calculate: sources
Frequently asked questions
What Markdown features are supported?
Headings (# to ######), bold, italic, strikethrough, inline code, links, images, bulleted and numbered lists, task lists (- [ ] and - [x]), blockquotes, fenced code blocks, horizontal rules, line breaks, and GitHub-style tables with column alignment.
Does it render exactly like GitHub?
Close for everyday documents, but not identical. GitHub uses the full GitHub Flavored Markdown spec plus extras like mentions, emoji shortcodes, footnotes, and Mermaid diagrams, which are not rendered here. Nested lists are also flattened.
How do I make a line break in Markdown?
A single line break inside a paragraph is ignored. End the line with two spaces or a backslash to force a break, or leave a blank line to start a new paragraph.
How do I make a table in Markdown?
Separate cells with pipes and put a divider row of dashes under the header: | Name | Price | then | --- | ---: |. A colon on the right aligns that column right; colons on both sides center it.
Is raw HTML in my Markdown rendered?
No. HTML tags are shown as text, and javascript: links are blocked. That keeps the preview safe when you paste Markdown from somewhere you do not fully trust.
Can I export the result as HTML?
Yes. Copy HTML puts the rendered markup on your clipboard, ready for an email template, CMS, or static page.
Is my Markdown uploaded?
Everything runs in your browser. Nothing you enter is uploaded to a server or stored by us.
What file extension does Markdown use?
.md is the standard, and .markdown also works. GitHub automatically renders a file named README.md on a repository's front page.
How do I escape a Markdown character?
Put a backslash before it, for example \* to show a literal asterisk, or wrap the text in backticks to show it as code.