Markdown Editor & Viewer

about this tool

Write on the left, read on the right

Type Markdown and see it rendered live. Split view shows both, or switch to writing or reading alone when you want the width. Word and character counts update as you go, and the rendered HTML can be copied or downloaded as a complete standalone document.

For reading time and a sentence count as well, paste the text into the word counter.

Which Markdown

Standard CommonMark plus the GitHub extensions people actually use: tables, fenced code blocks, task lists, strikethrough and autolinks. That is the dialect a README, a pull request description or an issue comment will be interpreted in, so what renders here is what renders there.

Diagrams

Fenced blocks tagged mermaid are rendered as diagrams — flowcharts, sequence diagrams, state diagrams, ER diagrams, Gantt charts:

graph TD
  A[Request] --> B{Cached?}
  B -->|yes| C[Return cached]
  B -->|no| D[Fetch and store]

This is worth using in documentation because the diagram lives in the same file as the prose, in text, so it survives review and version control. A PNG exported from a drawing tool goes stale the moment someone changes the system and cannot be diffed.

Pasting something you do not trust

Markdown permits raw HTML, and raw HTML permits scripts, so a Markdown preview is a real attack surface — several editors have shipped bugs here. This one runs the rendered HTML through an allow-list before it reaches the page: only ordinary document elements are kept (headings, paragraphs, lists, tables, code, images, links and the like), event-handler attributes are dropped, and a link or image may only point at an https:, mailto:, tel: or relative address, so a javascript: or data: URL never survives. The behaviour is pinned by tests that feed a dozen known attacks through the whole pipeline and check nothing executable comes out.

Diagrams are rendered by Mermaid in its strict mode, which applies the same principle to the SVG it produces.

So a README from a stranger, an issue body, or a file you did not write can be previewed here without it running anything in your browser.

The things people get wrong

• A line break is not a line break. A single newline is treated as a space. Two spaces at the end of a line force a break, or leave a blank line for a new paragraph.
• Lists need a blank line before them, or they get absorbed into the preceding paragraph.
• Indenting by four spaces makes a code block, which is the usual reason a nested list renders as monospaced text.
• Underscores inside words can turn into emphasis, so snake_case_name sometimes needs escaping.

Local, and offline

Rendering happens in the page. Draft posts, internal documentation and meeting notes are exactly the sort of thing that should not be uploaded to read, and once the page has loaded the editor keeps working with the network off.

For filler text to lay a document out before the real copy exists, the lorem ipsum generator produces it as Markdown ready to paste.

To move a document between the two formats rather than preview it, the HTML ↔ Markdown converter goes both ways and keeps nested lists and tables intact. For a diagram on its own, with a live preview and SVG or PNG export, the Mermaid editor.

Tables are the fiddliest part of Markdown to type by hand; the Markdown table builder makes one in a grid, from CSV or pasted spreadsheet cells, or tidies an existing one, with the pipes lined up.

questions

Which flavour of Markdown does it support?

CommonMark plus the GitHub extensions people actually use: tables, fenced code blocks, task lists, strikethrough and autolinks. That is the dialect a README, pull request description or issue comment is interpreted in.

Can it render diagrams?

Yes. Fenced blocks tagged mermaid become flowcharts, sequence, state, ER and Gantt diagrams. Keeping a diagram as text in the same file as the prose means it survives review and version control, unlike an exported image.

Why is my single line break ignored?

Because Markdown treats one newline as a space. End the line with two spaces to force a break, or leave a blank line to start a new paragraph.

Why is my nested list rendering as code?

Because indenting by four spaces makes a code block. Use two spaces for nesting a list item instead.

Is it safe to preview a Markdown file from someone I do not trust?

Yes. Markdown allows raw HTML, so the rendered output is passed through an allow-list sanitiser before it reaches the page: only ordinary document elements survive, event-handler attributes are removed, and links may only use https, mailto, tel or relative addresses, so javascript: and data: URLs are dropped. Tests feed a dozen known attacks through the pipeline to keep it that way.

Is my document uploaded to preview it?

No. Rendering happens in the page, and once loaded the editor keeps working offline. Draft posts and internal documentation are exactly what should not be uploaded to read.