Markdown Preview Widget
Embed a live Markdown editor preview in your documentation or writing guide. Readers type Markdown and see headings, lists, tables, code and links rendered instantly, then copy clean HTML.
Live preview
Exactly what your visitors will seeUnder the widget on your page: Powered by A2Z Tools
Embed code
<iframe src="https://a2z.tools/embed/w/markdown-preview" title="Markdown Preview by A2Z Tools" width="100%" height="850" style="border:0;width:100%" loading="lazy" allow="clipboard-write"></iframe>
A plain iframe. Works everywhere, including site builders that strip scripts. Adjust height if your content needs more room.
<div data-a2z-widget="markdown-preview" data-height="850"></div> <script async src="https://a2z.tools/embed.js"></script>
Adds a small script (what it does) that sizes the widget to fit its content, loads it lazily and keeps it isolated from your page's CSS.
Works with
How it works
The widget parses a practical subset of CommonMark - ATX and setext headings, emphasis with CommonMark's delimiter rules, code spans, fenced and indented code, block quotes, nested lists - plus GitHub-style tables, strikethrough and task lists. The parse produces a small syntax tree; the preview is built from it with DOM elements and text nodes, and the HTML output is serialised from the same tree with every value escaped. Raw HTML in the Markdown is therefore shown as text and can never run. Links keep only absolute http, https and mailto addresses and open in a new tab with rel="nofollow noopener noreferrer". Remote images are not loaded in the preview (it shows the alt text) but stay in the copied HTML.
Method
- Blocks: # headings, setext, paragraphs, > quotes, - * + and 1. lists, ``` / ~~~ fences, 4-space code, ---, GFM tables
- Inlines: *em*, **strong**, ~~del~~, `code`, [text](url "title"), , <autolinks>, hard breaks
- Safety: no raw HTML; URLs parsed with the URL API, only http(s)/mailto kept; all output escaped
- Not supported: reference-style links, footnotes, HTML blocks, entities
Limitations
- Only a subset of CommonMark passes: reference-style links, footnotes, HTML blocks and entity references such as © are not rendered.
- No syntax highlighting inside fenced code, no maths (KaTeX/MathJax), no Mermaid diagrams and no heading anchors.
- Remote images are never fetched in the preview, so image sizes and broken image URLs cannot be checked here.
- Links other than absolute http, https and mailto (relative paths, ftp:, javascript:) are dropped from the output.
Where publishers use it
- README and documentation style guides
- Courses teaching Markdown to bloggers or students
- Static-site generator tutorials (Hugo, Jekyll, Astro)
- Help centres of apps that accept Markdown in comments or tickets
Questions
Can I include HTML in the Markdown?
It is displayed as text rather than rendered, on purpose: the widget runs on A2Z's domain and never executes content from the page.
Why don't images appear in the preview?
The embedded frame does not load third-party images, for privacy and security. The preview shows the alt text; the copied HTML keeps the image tag.
Is the output GitHub-compatible?
Common syntax renders the same way, including tables, task lists and strikethrough. Some edge cases and extensions (footnotes, reference links) are not supported.
What does Copy give me?
Clean HTML with escaped text, safe links and no scripts, ready to paste into a CMS.
Sources
- CommonMark Spec, version 0.31.2 - CommonMark . Block and inline rules, emphasis delimiter runs; 28 Jan 2024
- GitHub Flavored Markdown Spec - GitHub . Tables, strikethrough and task-list extensions
Cite or recommend this tool
If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.
A2Z Tools Markdown Preview https://a2z.tools/markdown-editor
<a href="https://a2z.tools/markdown-editor">A2Z Tools Markdown Preview</a>
[A2Z Tools Markdown Preview](https://a2z.tools/markdown-editor)
Markdown Preview by A2Z Tools - https://a2z.tools/markdown-editor
Related widgets
-
Words, characters, sentences, paragraphs, reading time and social-media character limits.
-
Pretty-print, minify or validate JSON, with the line and column of the first syntax error.
-
Compare two versions of a text line by line or word by word, with additions and removals marked.
-
Title Case, Sentence case, UPPER, lower, camelCase, PascalCase, snake_case, kebab-case, CONSTANT_CASE.
-
Convert a JSON array of objects to CSV and CSV back to JSON, with RFC 4180 quoting.
-
Encode text to Base64 or decode it, with proper UTF-8 and an optional URL-safe alphabet.