Markdown Viewer and Preview
Preview Markdown the way a README renders, with tables and task lists. Shows the heading outline and flags level skips that break screen-reader navigation.
Paste Markdown on the left and the preview appears here.
The document is processed in your browser and never sent to a server.
Key Takeaways
- This viewer renders Markdown as React elements, never as an HTML string, so raw HTML in your document is displayed as text rather than executed.
- A heading that skips a level (H2 straight to H4) renders perfectly and reads as a broken hierarchy to a screen reader. The outline view makes those jumps visible.
- Reading time is computed from prose only. Counting the contents of code blocks as words inflates the estimate on a code-heavy README to the point of being useless.
- GitHub Flavored Markdown adds tables, task lists and strikethrough to the base syntax. All three are supported here, because a README without them is not a realistic preview.
Why a preview and an editor disagree
Markdown looks like a single language and is not. The original 2004 syntax left a great deal unspecified, CommonMark tightened it years later, and GitHub layered its own extensions on top. Two renderers can therefore both be correct and still disagree about your document, which is why a file that looks right in an editor can arrive broken on a repository page.
The differences cluster in a handful of places: how a list interacts with the blank line above it, whether a line break inside a paragraph is preserved, and what happens to raw HTML. Most of the time none of this matters. When it matters, it matters at the moment the document is published.
Raw HTML is shown, not executed
Markdown permits raw HTML by specification, and GitHub renders a sanitized subset of it. This viewer renders none of it: HTML tags in your source appear as literal text.
That is a deliberate security boundary rather than an oversight. A tool that invites you to paste a document and then turns that document into live markup is a reflected-scripting hole, and the usual mitigation is a sanitizer whose allowlist has to be maintained forever against a moving target. Rendering nothing is the one option with no ongoing maintenance obligation and no failure mode.
<div align="center"> <img src="logo.png" width="200"></div> This shows as text above, and renders on GitHub.The practical consequence: a README that centres its logo with a div will look different here than on GitHub. The tool says so explicitly when it detects HTML, rather than leaving you to wonder why a block vanished.
The outline, and the defect it exists to catch
The outline view lists every heading with its level and source line, indented by depth. Its real job is making one specific defect visible: a level skip.
# Project title## Installation#### Requirements <- jumps from H2 to H4Rendered, that looks fine. H4 is simply smaller than H3 would have been, and nothing appears wrong. But assistive technology announces heading levels as structure, and a jump from 2 to 4 tells a screen-reader user that a section is missing. Every automatic table-of-contents generator produces broken nesting from it too.
Note
What the statistics actually count
Word count and reading time exclude the contents of fenced code blocks. This is the difference between a useful estimate and a meaningless one: a README that is half installation commands would otherwise report a reading time dominated by text nobody reads as prose.
| Figure | What it counts |
|---|---|
| Words | Prose only. Code blocks, inline code and list markers excluded |
| Characters | The entire source, including whitespace and markup |
| Lines | Non-empty lines |
| Code blocks | Fenced blocks, with nested fences counted once |
| Reading time | Words at 200 per minute, rounded up to a minimum of one |
Fences that contain fences
One parsing detail is worth knowing because it breaks naive tooling constantly. A fence is three or more backticks, and the closing fence must be at least as long as the opening one. That is what lets a document about Markdown contain a code block that itself shows a code block.
```````this inner fence does not end the block```````A parser that closes at the first three backticks it meets treats the remainder of the file as prose, which throws off every count that follows and can turn ordinary text into phantom headings. This viewer tracks both the fence character and its length.
Nothing leaves your browser
The document is parsed and rendered locally. Nothing is uploaded, which is the point when the file in question is an internal specification or an unpublished README. Once the page has loaded you can disconnect and it keeps working.
Frequently Asked Questions
- Why does my HTML not render?
- By design. Rendering visitor-supplied HTML is a scripting vulnerability, and the alternative, a sanitizer, is a permanent maintenance obligation. HTML is shown as text and the tool tells you when it found some. GitHub renders a sanitized subset, so a document relying on HTML will look different there.
- Does it support GitHub Flavored Markdown?
- Yes. Tables, task lists, strikethrough and autolinks all work. These are the extensions a real README depends on, so a preview without them would not tell you much.
- Why is my reading time lower than other tools report?
- Because code blocks are excluded from the word count. On a documentation page that is mostly command samples the difference is large, and excluding them is the more honest number: nobody reads a shell transcript at prose speed.
- What is a heading level skip and why does it matter?
- It is a heading more than one level deeper than the one before it, such as an H4 directly under an H2. Visually nothing looks wrong, which is exactly the problem. Screen readers announce it as a gap in the document structure, and table-of-contents generators produce incorrect nesting from it.
- Can I open a .md file directly?
- Paste its contents into the source panel. The tool deliberately does not read files from disk, which keeps it working identically in every browser and avoids asking for a permission it does not need.
Tool and article by Mustafa Kürşad Başer, Senior Software Engineer. Published: August 2026.