Skip to main content
L
Loopaloo
Buy Us a Coffee
All ToolsImage ProcessingAudio ProcessingVideo ProcessingDocument & TextPDF ToolsCSV & Data AnalysisConverters & EncodersWeb ToolsMath & ScienceGames
Guides & BlogAboutContact
Buy Us a Coffee
L
Loopaloo

Free online tools for developers, designers, and content creators. Your files are processed in your browser and are never uploaded - no accounts required. A few network utilities (like What's My IP and Currency Converter) call public APIs to do their job and say so on their pages.

support@loopaloo.com

Tool Categories

  • Image Tools
  • Audio Tools
  • Video Tools
  • Document & Text
  • PDF Tools
  • CSV & Data
  • Converters
  • Web Tools
  • Math & Science
  • Games

Company

  • About Us
  • Contact
  • Blog
  • FAQ

Legal

  • Privacy Policy
  • Terms of Service
  • Disclaimer

Support

Buy Us a Coffee

© 2026 Loopaloo. All rights reserved. Built with privacy in mind.

Privacy|Terms|Disclaimer
  1. Home
  2. Document & Text
  3. Markdown Editor & Preview
Add to favorites

Markdown Editor & Preview

Markdown editor with a live preview from a real CommonMark 0.31.2 parser, scored 580 of 652 against the specification, plus GitHub tables, task lists and strikethrough, a document outline, and .md and .html export

Text processed locallyMore document & textJump to full guide

Initializing in your browser…

You might also like

HTML ↔ Markdown Converter

HTML to Markdown and back, built on a real HTML tree and a CommonMark parser rather than regular expressions, with GitHub tables, a live preview, and a report of everything Markdown could not carry

Markdown Table Generator

Build or paste a Markdown table and see it read back cell by cell, with column widths measured in display columns so CJK text, emoji and accents line up, and pipes escaped in the right order

Image Format Converter

Convert between the formats a browser can really write, then open the output and name the format its first bytes say it is. AVIF, BMP and GIF are disabled because a canvas returns a PNG for all three.

Markdown Editor & Preview: a worked example

You pasted a README from somewhere else and want to see how it really renders, including the one link that is not what it looks like.

Markdown

*foo **bar** baz*

[docs][d] and [help](javascript:alert(1))

[d]: /guide "Guide"
What Markdown Editor & Preview produces

Rendered HTML

<p><em>foo <strong>bar</strong> baz</em></p>
<p><a href="/guide" title="Guide">docs</a> and <a>help</a></p>

1 destination was not turned into a link

One emphasis holding one strong is what CommonMark section 6.2 says that first line means, and a lazy match between two pairs of asterisks gets it wrong; the parser here is the specification's own algorithm and reproduces 580 of its 652 published examples. The reference link resolves from its definition. The javascript: destination is refused, reported with the reason and left as text, because a preview writes its output into the page it is running in.

What is Markdown Editor & Preview?

Write Markdown on the left and watch the preview update on the right as you type. The preview comes from a real CommonMark 0.31.2 parser: the two-pass algorithm the specification sets out in its own Appendix A, with emphasis resolved through the delimiter stack described there rather than guessed at with a regular expression. It is scored against the specification's own conformance suite, the 652 numbered examples published as (markdown, expected HTML) pairs, and reproduces 580 of them byte for byte. On top of CommonMark it renders three GitHub extensions, each switchable: tables with per-column alignment, task list items, and strikethrough. Beside the preview it shows what the document actually holds, counted from the parse tree rather than from the source text, and an outline of every heading with the anchor id it was given.

How it works

Most in-browser Markdown previews, including the one this replaced, are a stack of regular expressions applied in sequence. That approach cannot express the rules Markdown actually has. Whether a run of asterisks opens or closes emphasis depends on the characters on both sides of it, and whether a run of three matches a run of two depends on a rule about the sum of the two run lengths modulo three; a lazy match between two pairs of asterisks answers neither question. Measured against the specification's suite on 2026-09-03, the previous converter reproduced 81 of the 652 examples. This one reproduces 580.

All 72 examples it does not reproduce fail for one reason, and it is a decision rather than a gap: raw HTML is never rendered. CommonMark passes HTML blocks and inline tags straight through (sections 4.6 and 6.11). This preview writes its output directly into the page, so passing it through would run whatever anybody pastes into the editor. The setting offers two behaviours, showing the markup as text or leaving a note where it was, and there is no third option that renders it. That accounts for the 64 examples in the two raw-HTML sections and 15 more elsewhere that happen to contain a tag.

Link destinations get the same treatment for the same reason. A destination is the only text in a Markdown document that reaches an HTML attribute, and two separate things can go wrong there: it can end the attribute and add its own, and it can be a script. Both are handled. Every destination is percent-encoded and escaped for the attribute, and every scheme is checked the way a browser reads it, case insensitively and with ASCII tabs and newlines removed first, so `JaVaScRiPt:` and a tab in the middle of the word are both recognised. A `javascript:`, `vbscript:` or HTML `data:` URL is refused, reported above the editor with the reason, and left as text; a `data:` image in an `img` is allowed for the raster media types and refused for SVG, which can carry script.

Reference-style links work, which they did not before: `[text][ref]` with a `[ref]: url "title"` definition anywhere in the document, plus the collapsed `[text][]` and shortcut `[text]` forms, with labels compared case-insensitively as section 4.7 requires. So do setext headings, indented code blocks, hard line breaks by two trailing spaces or a backslash, autolinks, character references, backslash escapes, nested and loose lists, and lazy blockquote continuation. The counts beside the editor come from the parse tree, so a `#` inside a fenced code block is not counted as a heading and a forty line code block does not inflate the reading time: the word count and reading time are of the prose, at 238 words a minute from Brysbaert's 2019 review of 190 studies. There is no token-level syntax colouring inside code blocks and no LaTeX math.

How to use

  1. 1Enter Markdown in the left editor pane, or press Import to load a .md file
  2. 2Watch the preview update on the right, or press HTML to see the generated markup instead
  3. 3Open Settings to turn the GitHub extensions on or off and to choose what happens to raw HTML
  4. 4Use the toolbar buttons to insert bold, italic, links, tables and task lists
  5. 5Copy the rendered HTML, or download the document as .md or as a standalone .html file

Key features

  • A real CommonMark 0.31.2 parser, scored 580 of 652 against the specification's own conformance suite
  • GitHub tables with per-column alignment, task list items and strikethrough, each switchable
  • Reference-style, collapsed and shortcut links with case-insensitive labels, and autolinks
  • Script destinations refused and reported: javascript:, vbscript: and HTML data: URLs never become links
  • Raw HTML shown as text or noted rather than rendered, stated on the page rather than left as a surprise
  • Counts and reading time taken from the parse tree, so code blocks are not counted as prose
  • A document outline listing every heading with the anchor id it was given, accents kept
  • Copy the HTML, or download .md or a standalone .html file

When to reach for this

  • Writing README files

    Draft and preview GitHub-style README files with tables, task lists and code samples, and see the reference links resolve, before pushing to your repository.

  • Preparing blog content

    Write posts in Markdown and verify formatting, link rendering and image placement before publishing, with the reading time computed from the prose rather than the source.

  • Checking Markdown you did not write

    Paste a document from somewhere else and see what it really contains: which destinations are scripts, where the raw HTML is, and how the headings nest.

Frequently asked questions

Which Markdown features are supported?

CommonMark 0.31.2, scored against the specification's own 652 published examples: 580 are reproduced byte for byte. That covers ATX and setext headings, emphasis and strong emphasis under the full flanking rules, inline, reference, collapsed and shortcut links, images, autolinks, inline code, fenced and indented code blocks, nested tight and loose lists, block quotes with lazy continuation, thematic breaks, hard line breaks, backslash escapes and character references. On top of that, three GitHub extensions: tables, task lists and strikethrough.

Why does my HTML show up as text instead of rendering?

That is deliberate and it is the only place this differs from CommonMark. The preview writes its output straight into this page, so rendering raw HTML would run whatever is pasted into the editor. You can choose between seeing the markup as text and leaving a note where it was, in Settings. It accounts for all 72 specification examples the parser does not reproduce.

Why was my link not turned into a link?

Its destination is a script. A javascript:, vbscript: or HTML data: URL runs code in whatever page renders it, so it is reported above the editor with the reason and left as plain text. The scheme is read the way a browser reads it, so a different capitalisation or a tab in the middle of the word does not get past the check. Ordinary destinations, including relative paths, fragments and mailto:, are untouched.

Do reference-style links work?

Yes. Write [text][ref] and put [ref]: https://example.com "Optional title" anywhere in the document. The collapsed form [text][] and the shortcut form [text] both work too, and labels are compared case-insensitively and with runs of whitespace collapsed, as section 4.7 requires.

Are code blocks syntax-highlighted?

No. A fenced code block renders in a monospace block and keeps the language you write after the opening backticks as a language-... class on the code element, but the tokens inside are not coloured. For that, use the Code Syntax Highlighter tool.

Where does the word count and reading time come from?

From the parse tree, not the source text. Code blocks are left out, and the markup itself never counts: a link contributes its text and not its URL. The reading time uses 238 words a minute, the mean for non-fiction silent reading in Brysbaert's 2019 review of 190 studies, the same rate the Word Counter and Text Statistics tools use.

Can I embed images?

Yes. Use ![alt text](URL) and the preview renders the image from that URL. A data: URL is allowed for PNG, JPEG, GIF, WebP, BMP, ICO and AVIF, and refused for SVG, because an SVG document can carry script.

Does it support LaTeX math?

No. There is no LaTeX or math rendering; math delimiters such as $...$ are shown as plain text.

Related tools and how they differ

  • HTML ↔ Markdown Converter: Converts existing HTML into Markdown (or back) with options for heading and code styles; use it to migrate content, not to author from scratch.
  • Markdown Table Generator: Builds one GFM table from a visual grid with per-column alignment and escaped pipes; use it when only the table syntax is the pain.
  • Code Syntax Highlighter: Themes a standalone code snippet and exports it as HTML or a PNG image; use it for shareable highlighted snippets, not full documents.

Private by design

Your text is processed locally in the browser. Nothing you paste or open is transmitted or logged.