π
Free Markdown Editor
Write and preview Markdown in real time. Supports headings, bold, italic, code blocks, tables, and lists.
Works offline once loaded
94 words Β· 553 chars
Markdown
Preview
<h2 class="text-2xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Welcome to the Markdown Editor</h2>
<p class="my-3 text-slate-700 dark:text-slate-300 leading-relaxed">Write <strong>Markdown</strong> on the left, see the live preview on the right.</p>
<h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Features</h3>
<ul class="list-disc list-inside my-3 space-y-0.5 text-slate-700 dark:text-slate-300"><li class="my-0.5"><strong>Bold</strong>, <em>italic</em>, and <del>strikethrough</del></li><li class="my-0.5"><code class="bg-slate-100 dark:bg-slate-800 text-pink-600 dark:text-pink-400 rounded px-1 py-0.5 text-[0.85em] font-mono">Inline code</code> and fenced code blocks</li><li class="my-0.5"><a href="https://libratool.com" target="_blank" rel="noopener noreferrer" class="text-teal-600 dark:text-teal-400 underline underline-offset-2">Links</a></li><li class="my-0.5">Lists, blockquotes, tables, and more</li></ul>
<h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Code example</h3>
<pre class="bg-slate-900 dark:bg-slate-950 text-slate-100 rounded-lg p-4 overflow-x-auto text-sm font-mono my-4"><code class="language-javascript">function greet(name) {
return `Hello, ${name}!`;
}</code></pre>
<blockquote class="border-l-4 border-teal-400 dark:border-teal-600 pl-4 my-3 text-slate-600 dark:text-slate-400 italic">Markdown was created by John Gruber in 2004 to make writing for the web easier.</blockquote>
<table class="my-4 w-full text-sm border-collapse"><thead><tr><th class="border border-slate-300 dark:border-slate-600 bg-slate-100 dark:bg-slate-800 px-3 py-2 text-left font-semibold">Feature</th><th class="border border-slate-300 dark:border-slate-600 bg-slate-100 dark:bg-slate-800 px-3 py-2 text-left font-semibold">Supported</th></tr></thead><tbody><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Headings</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">β</td></tr><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Lists</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">β</td></tr><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Tables</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">β</td></tr><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Code</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">β</td></tr></tbody></table>
Markdown cheatsheet
# Heading 1H1
**bold**Bold
*italic*Italic
`code`Inline code
- itemBullet list
1. itemNumbered list
> quoteBlockquote
[text](url)Link
Image
---Divider
Common uses
- Write API Documentation in MarkdownDraft endpoint descriptions, request/response examples, and parameter tables in Markdown.
- Take Markdown NotesWrite structured notes in Markdown that can be pasted into Notion, Obsidian, Bear, or any Markdown app.
- Write a GitHub README in MarkdownDraft and preview your GitHub repository README with live Markdown rendering.
- Write Technical DocumentationWrite and preview API docs, wikis, and technical guides in Markdown before publishing.
- Write Blog Posts in MarkdownDraft blog posts in Markdown for Ghost, Jekyll, Hugo, Hashnode, and other Markdown-based publishing platforms.
How It Works
The preview is rendered by a hand-written Markdown parser built directly into the tool β no marked, no remark, no external library. It tokenizes the source line-by-line in the browser, converting syntax into HTML that is then passed through a sanitizer before display.
- 1Line-by-line tokenizationThe custom renderMarkdown function splits your source on newlines and walks through them in a single pass, matching fenced code blocks, headings (H1βH6), blockquotes, ordered and unordered lists, GFM tables (with column-alignment), horizontal rules, and paragraphs in priority order.
- 2Inline syntax expansionEach collected line or cell is then processed by inlineMarkdown, a chain of regex replacements that handles bold (** and __), italic (* and _), bold-italic (***), strikethrough (~~), inline code (), images (), and links ([text](url)) β images are resolved before links so the ! prefix is not consumed incorrectly.
- 3Sanitization and remote-resource blockingThe raw HTML produced by the renderer is passed through a sanitizer (sanitize-html) to strip unsafe tags and attributes such as <script>, onerror handlers, and javascript: hrefs. A second pass (neutralizeRemote) replaces remote image src values with placeholders by default, preventing the preview from silently phoning home to external servers before you opt in.
- 4Export as .md or standalone .htmlCopying or downloading Markdown writes the raw source text. Downloading HTML wraps the sanitized output in a self-contained document with its own inline stylesheet β Tailwind classes only work inside the site, so the export bundles plain CSS rules instead, making the file readable anywhere.
Related Tools
HTML to Markdown Converter
Convert HTML to clean Markdown. Handles headings, lists, links, images, code blocks, tables, and blockquotes. Perfect for moving content out of CMSes.
Try it
Markdown to HTML Converter
Convert Markdown to clean HTML with live preview. Use the source view to copy ready-to-paste HTML for blogs, CMSes, or email templates.
Try it
Mermaid Diagram Editor
Write flowcharts, sequence diagrams, Gantt charts, and more in Mermaid syntax with a live preview. Export as SVG or PNG. Runs entirely in your browser.
Try it