Markdown Editor

What Markdown Editor does

Markdown Editor is a split-view writing tool: type Markdown on the left and the formatted result appears on the right as you type. A toolbar inserts the common building blocks — bold, italic, headings, lists, task lists, quotes, links, images, code, tables and horizontal rules — and the document can be downloaded as a .md file, exported as a styled HTML page, or copied as HTML.

It suits README files, notes, documentation drafts, changelogs, blog posts, comments and anything else that will eventually be rendered by a Markdown-aware platform. The starter document in the editor doubles as a syntax cheat sheet, showing bold, italic, strikethrough, links, images, inline code, fenced code blocks, lists, tables and quotes. Typing “# Hello” followed by “This is **bold** text.” renders a heading and bold text, and the stats line reads “5 words · 31 chars · 3 lines”.

Rendering uses marked, a widely used Markdown parser loaded from the jsDelivr CDN. If that library cannot be fetched, the preview falls back to showing your source text escaped in a preformatted block rather than breaking.

How to use Markdown Editor

1. Type in the left pane, or press Load .md to open a local .md, .markdown or .txt file.
2. Use the toolbar for common syntax or type it directly; the preview on the right refreshes as you type.
3. Keyboard shortcuts: Ctrl/Cmd+B for bold, Ctrl/Cmd+I for italic, Ctrl/Cmd+K for a link, and Tab to insert two spaces.
4. Watch the stats line for word, character and line counts.
5. Download the source with Download .md, or a standalone page with Download .html.
6. Use Copy HTML to copy the rendered markup, or Clear — with a confirmation — to start a new document.

Features

• Live split-screen preview with a short debounce, so the rendered view keeps up while typing.
• Toolbar buttons for bold, italic, strikethrough, three heading levels, bullet, numbered and task lists, quote, link, image, inline code, fenced code block, table and horizontal rule.
• Keyboard shortcuts for bold, italic and link, plus Tab for two-space indentation.
• GitHub-style tables, strikethrough and task lists render as real HTML through marked.
• Load local .md, .markdown and .txt files; download the Markdown, export standalone HTML, or copy the HTML.
• Word, character and line counters, and a plain-text preview fallback if the parser library cannot be downloaded.

Tips and common mistakes

• Raw HTML in your Markdown is passed through into the preview rather than sanitised. Treat the editor like a code editor and only render content you trust, especially documents from other people.
• The first render downloads the marked parser from jsDelivr. Once the browser has cached it, previews make no further request for it; if the library cannot load at all, the preview shows escaped source text instead of formatted output.
• The Table toolbar button inserts a three-column table including the separator row — the dashes under the header are required for the table to render.
• Task lists use the “- [ ]” and “- [x]” syntax, and the checkbox state is just text; editing the source updates the checkbox.
• The HTML export embeds the styles used in the preview, so it opens as a self-contained page. Links and image URLs stay exactly as written and are not downloaded or inlined.

Frequently asked questions

Related text tools: HTML ↔ Markdown, Word Counter, Slug Generator, Case Converter.

🔒 Your Markdown stays on your device; the marked parser is fetched from a CDN on first render, but the text itself is never uploaded.