Write Markdown With Live Preview

Markdown is the kind of format that looks easy until you are halfway down a README and cannot remember whether the table separator needs three dashes or whether the checkbox goes before or after the dash. You write it in one window, paste it somewhere to see how it looks, find a broken list, go back, and repeat. A live preview closes that loop: the page you are building appears next to the text you are typing.

The short version: write in the left box of Markdown Editor, watch the rendered page on the right, use the toolbar for the syntax you forget, and download the result as a .md file or a ready-to-open HTML page.

The screen

The editor has three parts: a toolbar across the top, a Markdown box on the left and a Preview on the right. On a phone or a narrow window, the two boxes become Write and Preview tabs so you can switch between them. A line under the boxes tells you the size of the document: words, characters and a reading time. Under the boxes there are buttons to download the Markdown, download an HTML page, copy the HTML and open a .md file from your device.

A new document starts with a small starter text, a heading called "Untitled" and two bullet points, so you can see how things render before you type anything.

The toolbar

There are fifteen buttons: Heading 1, 2 and 3; Bold, Italic and Strikethrough; Inline code and Link; Bullet list, Numbered list and Task list; Quote, Code block, Table and Horizontal rule. Two things make them better than a plain set of shortcuts.

They toggle. Select a word and press Bold, and it gets double stars around it. Press Bold again with the word still selected, and the stars are removed. The tool also recognises when your selection sits just inside the stars and removes them from there, and it does not mistake the inside of bold for italic. The same applies to the heading buttons, the list buttons and the quote button: press them on a line that already has the format and the format is removed.

They work on whole lines when that makes sense. Select three lines, press Bullet list, and each gets a dash. Press Numbered list instead and they become 1., 2. and 3. If the lines were already a bullet list, the numbered button swaps the dashes for numbers instead of stacking one format on top of another, and a heading marker is removed when you turn a line into a list item.

A few details are worth knowing. With no text selected, Bold inserts the words "bold text" between the stars, already selected, so you can type over them. The Link button wraps your selection as your text and selects the web address part, so you can paste the real address straight in. The Table button inserts a three-column table with a header row and two rows of cells, and selects the first column name for you to rename. The Code block button wraps the current line or lines in triple backticks.

There are also three keyboard shortcuts in the writing box: Ctrl or Cmd with B for bold, I for italic and K for a link.

What the preview shows

The preview renders the standard Markdown you know plus the common GitHub extras: tables, task lists, strikethrough, fenced code blocks, and bare web addresses that become links automatically. It also supports footnotes. Write a reference such as note[^1] in the text and a line [^1]: The note text. anywhere in the document, and the preview numbers the footnote, links to it and adds a list of notes at the bottom with a return arrow. Footnotes are numbered in the order they first appear, and a note that is never referenced is left out.

Here is what a small test document produces:

• A heading line # Trip plan becomes a first-level heading.
• The lines - [x] Book flights and - [ ] Pack become a list with a ticked and an unticked checkbox.
• A three-line pipe table with Day and Plan columns becomes a proper table with a header row.
• A fenced block holding npm run build is shown as preformatted code.

The preview is safe by design. It runs in a sandboxed frame, and the Markdown is cleaned before it is shown. A link whose address starts with javascript: loses its address and becomes plain text, and a script tag typed into the text is removed. That means you can paste Markdown from somewhere you do not fully trust and look at it without anything running. It also means the HTML you copy out is safe to share.

Reading time, titles and file names

The count line uses a simple rule: reading time is the number of words divided by 200 and rounded up, with a minimum of one minute. A 450-word draft shows 450 words, 2,250 characters and about 3 minutes. Use it to check a blog post or a newsletter against the length you planned. For deeper counts, Word Counter gives sentences and paragraphs as well, and our Word Counter guide explains them.

The tool takes the title of the document from the first heading, or from the first line of text if there is no heading, and strips the formatting characters from it. A heading such as # My Great Trip (2026) gives the title My Great Trip 2026 and a file name of my-great-trip-2026. The HTML page uses the same title in its title tag. If you want a different file name, change the first heading.

Downloading and copying

Download .md saves exactly what is in the writing box, as a UTF-8 text file with a .md extension. Download HTML page saves a complete page with a doctype, a viewport setting, a title and a simple readable style, so it opens on any device without extra files. Copy HTML puts only the body HTML on your clipboard, which is the right choice if you want to paste into a content system. If you need more control over conversion, including turning pasted HTML back into Markdown, use the Markdown to HTML Converter, which the editor links to from the foot of the page. There is a longer walk-through in the Markdown to HTML Converter guide.

Open .md file loads a Markdown file from your device into the writing box. It accepts .md, .markdown and .txt files up to 2 MB, and it replaces whatever is in the box, so download your current draft first if you want to keep it.

Your draft stays in your browser

The tool does not upload your text. While you type, your draft is kept in this browser tab, so a reload does not lose it, and closing the tab erases it. That suits private notes and unpublished writing, and it is also the thing to remember: if you close the tab without downloading, the text is gone. Download the .md file before you leave.

Habits that keep Markdown tidy

Leave a blank line between paragraphs, lists, headings and tables. The tool's own tip gives that as the first rule, and most broken previews come from skipping it. Use one heading level at a time and do not skip from level one to level three. Keep one idea per list item. Write link text that says where the link goes. In a table, keep the separator row of dashes under the header. And preview before you publish, because the preview is the quickest way to find a missing blank line.

Steps

1. Open Markdown Editor, or press Open .md file to load an existing draft.
2. Type your text. Use the toolbar or the keyboard shortcuts for the formatting.
3. Watch the preview and fix anything that looks wrong, usually a missing blank line.
4. Check the count line against the length you wanted.
5. Press Download .md to keep the source, and Download HTML page or Copy HTML if you need the rendered version.
6. Save the .md file before you close the tab.

The tool is a Professional Tool with 10 trial uses a day, then a $1 day pass or the $4.99 monthly plan. The two download buttons use a trial use. Writing and previewing do not.

Common mistakes

Closing the tab without downloading. Forgetting the blank line before a list or a table. Using the Open button on a new file and overwriting an unsaved draft. Pasting a link with a space in the address. Expecting a style that the preview does not draw, such as coloured text. And editing the file name when the title is what controls it.

Summary

Writing Markdown is faster when you can see the result as you go. Markdown Editor gives you a toggling toolbar, a safe live preview with tables, task lists and footnotes, a reading-time count, and one-click downloads of the source or a finished HTML page, all without sending your text anywhere. More writing helpers are in the text tools category.

Open Markdown Editor→

What would make your Markdown workflow easier? Tell us on the contact page.