Markdown Editor
Text Tools
Write Markdown with a live preview pane, formatting toolbar, and autosaved drafts. Export to .md or sanitized .html when you're done.
Runs entirely in your browserAbout Markdown Editor
Markdown is the lingua franca of modern writing: GitHub READMEs, blog posts on every static site generator, Notion blocks, Slack messages, Substack drafts, documentation in a dozen tools. Whether you're outlining a long-form piece or drafting a README, having a no-friction editor that previews the result as you type beats fighting with formatting in a styled WYSIWYG.
This editor pairs a plain Markdown textarea with a live HTML preview powered by `marked` (the same parser our converter uses), sanitized with `DOMPurify` so any embedded raw HTML is safe. A toolbar covers the formatting actions you reach for most — headings, bold/italic/strike, lists, links, images, code blocks, tables, quotes, horizontal rules — each one cursor-aware so it wraps your current selection or inserts a placeholder. Your draft autosaves to your browser's localStorage on every keystroke, so refreshing the page or closing the tab never loses work. Export the result as `.md` or as a standalone `.html` file when you're ready.
How to use
- 1
Start typing in the left pane
Markdown goes on the left, the rendered preview appears on the right in real time.
- 2
Use the toolbar for formatting
Click any button to wrap your selection or insert a placeholder: headings dropdown (H1–H4), bold, italic, strikethrough, inline code, code block, lists, quote, link, image, table, horizontal rule.
- 3
Trust autosave
Every keystroke is saved to your browser's localStorage under a single key. Closing the tab and reopening the page later shows a Restore prompt with your last draft.
- 4
Export when done
Use the .md button to download the raw Markdown, or .html to get a standalone HTML file with your rendered content (sanitized for safety).
- 5
Reset to start fresh
Click Reset to clear the editor back to the sample document. Your localStorage draft gets overwritten on the next keystroke.
Examples
Headings + emphasis
Input
# My title
This is **bold** and _italic_ text.Output
<h1>My title</h1>
<p>This is <strong>bold</strong> and <em>italic</em> text.</p>Code block with language hint
Input
```js
console.log('hi');
```Output
Renders as a syntax-friendly fenced code block in the preview.GFM table
Input
| Tool | Status |
| ---- | ------ |
| Editor | Live |
| Preview | Live |Output
A two-column table with header row, rendered as semantic <table> markup.Frequently asked questions
How is this different from the Markdown to HTML converter?+
The converter is a one-shot tool: paste, copy, done. This editor is for ongoing writing — split-pane live preview, toolbar, autosave, export. Use the converter when you have existing Markdown and just need the HTML; use the editor when you're authoring new content.
Where is my draft saved?+
In your browser's localStorage under the key `ftg-markdown-editor-draft-v1`. Each browser/device has its own storage — drafts don't sync across devices. To clear, open DevTools → Application → Local Storage → delete the key, or click Reset to overwrite.
Does it support GitHub Flavored Markdown (GFM)?+
Yes — GFM is enabled by default. That means tables, autolinks, strikethrough (`~~text~~`), and fenced code blocks all work.
Is the preview safe from XSS?+
Yes. We sanitize the rendered HTML with DOMPurify before injecting it into the preview. Any `<script>` tags, inline event handlers, or `javascript:` URLs in your Markdown are stripped. The exported .html file uses the same sanitized output.
Why is my exported HTML unstyled?+
The export contains semantic HTML only — `<h1>`, `<p>`, `<table>`, etc. — without any CSS. Wrap it in your own stylesheet, or apply Tailwind's `prose` class to a container if you're embedding it in a Tailwind-using site.
Is the editor accessible?+
The toolbar buttons have aria-labels, keyboard focus works correctly, and the textarea is a native control with full screen-reader support. The split-pane layout reflows to single column on small screens.
Is my content uploaded?+
No. Parsing, sanitization, autosave, and export all run in your browser. Nothing is transmitted.
Related tools
Remove Duplicate Lines
Strip duplicate lines from text. Supports case sensitivity and whitespace trimming.
Word Counter
Count characters, words, sentences, and paragraphs with live reading-time estimates.
Case Converter
Convert text between upper, lower, title, camelCase, snake_case, kebab-case, and more.
Text Diff Checker
Compare two pieces of text and highlight differences inline or side by side.
Lorem Ipsum Generator
Generate placeholder text in classic, hipster, or corporate dialects.
Markdown to HTML Converter
Convert Markdown into safe, sanitized HTML with a live preview pane.