← Back

Markdown Editor

Live preview, download and export

Edit (Markdown source)
Preview

Welcome to the Markdown Editor

Type Markdown text on the left, and the rendered result shows up on the right in real time.

Common syntax supported

  1. Ordered list
  2. Second item

Quoted text

Code block

About Markdown Editor

This is a side-by-side Markdown editor (stacked on narrow screens): one pane for the source, the other showing the rendered result as you type. Rendering is done by the marked library, and the resulting HTML is passed through DOMPurify before it is displayed. You can download your text as a .md file or copy the rendered HTML. It helps to know what it is not: it has no toolbar buttons for bold or tables, it does not autosave, it cannot export PDF or Word, and it has no syntax highlighting or image upload. It suits practising syntax, checking how a piece of Markdown renders, or drafting a simple document.

How to use it

  1. When the page opens, the 'Edit (Markdown source)' box on the left already holds a sample document. Edit it or delete it and start over. The sample follows the interface language you have selected.
  2. Type Markdown on the left and the 'Preview' area on the right updates live. There is no separate render or refresh button.
  3. To keep your work, click 'Download .md file'. The browser saves the current source as a file named document.md in the English interface (the Chinese interface uses 文档.md).
  4. To use the rendered result in a web page or email template, click 'Copy rendered HTML'. What goes to the clipboard is the sanitized HTML string, not the preview's styling. The page shows no confirmation, so paste somewhere to check that it worked.

A worked example

Suppose you are writing a short checklist. On the left, enter a line '## Title', a two-column table (the first row | Name | Qty |, the second row | --- | --- |, the third row | Apple | 3 |) and a line '- [x] Done'. Parsed with the same marked library the tool uses, the actual HTML contains an h2 heading, a table with thead and tbody parts, and a list item holding a checked, disabled checkbox. Writing ~~struck~~ gives a del element and **bold** gives a strong element. One more result from running it: two lines with no blank line between them are merged into a single paragraph rather than broken, so to start a new line you need either a blank line or two trailing spaces. The preview area shows all of this as you edit.

Supported features and known limits

  • Syntax is parsed by marked, covering the usual GitHub-style Markdown: headings, bold, italics, strikethrough, ordered and unordered lists, task lists, quotes, inline code and code blocks, links, images and tables. Exact behaviour is whatever marked does; extensions such as footnotes, math, diagrams and emoji shortcodes are not supported.
  • The rendered HTML is sanitized by DOMPurify to filter scripts and other dangerous content. A script tag or event attribute you write will therefore not appear in the preview or in the copied HTML. If you need to keep content like that, this tool is not the right one.
  • The preview styles cover h1 to h3 headings, paragraphs, lists, quotes, code, links and tables. Deeper headings (h4 and below) and horizontal rules use the browser defaults, so the preview may not match how the content looks once placed on your own site.
  • There is no autosave. Nothing is written to local storage, so refreshing or closing the page loses your text. Click 'Download .md file' first if you want to keep it.
  • 'Copy rendered HTML' depends on browser clipboard permission. If the browser refuses, the error is swallowed and the page does not tell you it failed.
  • Images can only point to web addresses. If you write an image link, your browser loads that address while previewing. There is no upload, paste-in or local image feature.
  • Very long documents are limited by your browser and device memory and may make typing sluggish.
  • The only export format is .md; there is no HTML file, PDF or Word export.

Why didn't my line break show up in the preview?

This is standard Markdown behaviour: a single newline is treated as a space inside the same paragraph. For a new paragraph leave a blank line; for a forced line break inside a paragraph, end the line with two spaces before pressing Enter. It is not a fault in the tool.

My table is not rendering as a table. What is wrong?

A table needs a header row and a separator row of dashes, with cells divided by vertical bars. The usual mistakes are leaving out the separator (| --- | --- |) or not leaving a blank line above the table, so it merges with the paragraph before it. Fix that and the preview updates at once.

Does the copied HTML include styling?

No. You get plain HTML tags as text (h2, p, table and so on). The fonts, colors and borders in the preview come from this page's own CSS and are not part of what you copy. After you paste it into your site or an email, the appearance depends on the stylesheet there.

Is it compatible with GitHub, Typora and other tools?

A .md file is plain text and opens in other editors. Different tools use slightly different Markdown implementations, for example in line breaks, nested list indentation, task lists and extensions, so what you see here may not match them exactly.

Privacy and processing

Parsing, sanitizing and previewing all happen in your browser. The code does not send your text to a server and does not save it to local storage. 'Download .md file' just creates a file on your own device. The only case that causes a network request is when your Markdown refers to an image by web address, in which case your browser fetches that address.