Markdown Editor

Write and preview markdown with GitHub-flavored markdown support. Live preview as you type.

PreviewMarkdownGFM
Markdown Input
634 chars
Preview
Welcome to Markdown Editor

Features

  • Live Preview — See your markdown as you type
  • GitHub Flavored Markdown — Support for tables, strikethrough, and more
  • Easy Formatting — Use the toolbar or type directly

Code Example

function greet(name) {
  return `Hello, ${name}!`;
}

Formatting Guide

ElementSyntax
Bold**text**
Italic*text*
Code\code``
Link[text](url)

Resources

Happy writing! 🚀

Characters
634
Words
91
Lines
31
Headings
5
Links
3

All markdown processing happens locally in your browser — your data never leaves your device.

Markdown Editor is a split-pane writing space: you type Markdown on the left and the rendered result updates on the right with every keystroke. It is meant for drafting README files, changelogs, pull request descriptions, docs pages and notes before they go into a repository or CMS.

Rendering uses react-markdown with the remark-gfm plugin, so GitHub Flavored Markdown works: pipe tables, task lists (- [ ] and - [x]), ~~strikethrough~~, footnotes and bare URLs that become links, on top of standard headings, emphasis, lists, blockquotes, links, images and fenced code blocks.

A small toolbar inserts common syntax at the cursor, and a stats bar counts characters, words, lines, headings and links. When you are done, copy the source or download it as a .md file. Raw HTML inside your Markdown is shown as plain text rather than rendered, and code blocks are displayed in monospace without syntax colouring.

Need placeholder copy for a layout? Generate it with the lorem ipsum generator. To compare two drafts of the same document, paste them into Text Compare.

  1. Type or paste Markdown into the Markdown Input pane; the sample content can be removed with Clear.
  2. Watch the Preview pane update as you type.
  3. Select a word and click Bold, Italic or Link in the toolbar to wrap it, or click Code or List to insert a placeholder at the cursor.
  4. Check the stats bar below the editor for word, line, heading and link counts.
  5. Copy the Markdown with the copy button, or click Download .md to save it as a file.

  • Live side-by-side preview that re-renders on every change
  • GitHub Flavored Markdown: tables, task lists, strikethrough, footnotes and autolinks
  • Toolbar shortcuts for bold, italic, inline code, list items and links
  • Character, word, line, heading and link counts
  • Download the source as a .md file or copy it to the clipboard
  • Raw HTML is not executed; it appears as text in the preview
  • Runs in the browser with no account or upload

README section with a task list

## Setup

1. Clone the repo
2. Run `npm install`

### Roadmap
- [x] Dark mode
- [ ] Export to PDF

Renders a numbered list with inline code, followed by a checklist with one item ticked.

Table with alignment

| Endpoint     | Method | Auth |
|:-------------|:------:|-----:|
| /api/users   | GET    | yes  |
| /api/health  | GET    | no   |

Colons in the separator row set left, centre and right alignment for each column.

Fenced code block

```bash
npm run build
```

Shown as a monospaced block. The language tag is kept in the source for GitHub and other renderers, but the preview does not colour the code.

Footnote and strikethrough

The API is ~~experimental~~ stable.[^1]

[^1]: Since v2.0.

Strikes through the first word and adds a numbered footnote at the bottom of the preview.

Table shows as plain text

The separator row under the header is missing, or it has a different number of columns than the header.

Add a line such as |---|---| directly under the header row, with one dash group per column.

List or heading not recognised

Markdown needs a space after the marker (# Title, - item) and usually a blank line before a list that follows a paragraph.

Insert the missing space or blank line.

Code block swallows the rest of the document

An opening ``` fence has no matching closing fence.

Add a closing ``` on its own line after the code.

HTML tags appear as text in the preview

The preview does not render raw HTML.

Use Markdown syntax for the same effect, or wrap the HTML in a code block if it is meant as an example.

Will the preview match how GitHub renders my README?

Closely for structure: tables, task lists, strikethrough, footnotes and autolinks follow the GFM spec. Differences you will notice are that GitHub colours code blocks by language, renders some raw HTML tags, and supports extras like alerts, emoji shortcodes and Mermaid diagrams, which this preview does not.

Can I use HTML inside the Markdown?

You can type it, and it stays in your source, but the preview shows HTML tags as literal text instead of rendering them. This avoids running untrusted markup. If you need to display HTML code examples, put them in a fenced code block, or convert the characters with the HTML escape tool.

Can I export the rendered HTML?

No. The editor exports Markdown only, through the copy button or Download .md. The Markdown file can then be rendered by GitHub, a static site generator or any Markdown library.

How does the toolbar handle selected text?

Bold, Italic and Link wrap the current selection (for example, selecting "docs" and clicking Link gives [docs](url)). Code and List insert `code` or - item at the cursor, replacing any selection.

Is my text saved?

Nothing is stored or uploaded. The content lives in the page while it is open, so download or copy it before closing the tab.