Markdown Editor with Live Preview

Markdown is a lightweight text formatting language created by John Gruber in 2004. It lets you write using plain text characters — like # for headings and ** for bold — that are then converted to formatted HTML. It's deliberately designed to be readable even as raw plain text, making it ideal for documentation, README files, blog posts, and notes.

Yes. This editor supports the most widely used GFM extensions: tables (pipe syntax with separator row), task lists (- [x] / - [ ]), strikethrough (~~text~~), fenced code blocks with language labels, and auto-linked bare URLs. Advanced GFM features like footnotes, mathematical expressions, or HTML block-level tags are not rendered to keep the tool lightweight and safe.

No — everything you write stays in the browser's memory only. When you close or refresh the page, your content will be gone. Download your work as a .md or .html file before leaving. For persistent note-taking, consider pasting the output into a local file or a note-taking app.

The .md download saves your raw Markdown source text exactly as you typed it — ideal if you want to edit it again later, commit it to a repository, or use it in a Markdown-aware system like GitHub or a static site generator. The .html download saves a fully self-contained HTML file with inline CSS — ready to open in a browser and share as a formatted document without any additional processing.

Use pipes (|) to separate columns and a separator row of dashes between the header and body rows:

| Name | Age |
|------|-----|
| Alice | 30 |
| Bob | 25 |

The separator row must have at least three dashes per cell. Add colons for alignment: :--- (left), :---: (center), ---: (right).

This editor deliberately strips raw HTML from input before rendering to prevent XSS attacks. Inline HTML tags like <div>, <span>, or <br> typed into the editor will appear as escaped text in the preview. If you need custom HTML, write your Markdown, copy the rendered output with "Copy HTML", and edit the HTML directly.

Wrap your code with triple backticks and add a language name on the opening line:

```javascript
const x = 42;
```

This editor doesn't apply colour syntax highlighting inside code blocks (that would require a large library), but the language label is preserved in the rendered HTML's class attribute, so tools like Prism.js or Highlight.js can pick it up later.

Reading time is estimated at 200 words per minute — the commonly cited average silent reading speed for adults. The minimum displayed is 1 minute. This is a rough estimate and will vary depending on the complexity of your content.

Most Markdown editors either send your text to a server, require a login, or use a heavy library (like marked.js or showdown.js) that adds significant page weight. This tool runs a lightweight custom parser built into a single JS file with no external dependencies beyond Alpine.js for reactivity. It's intentionally simple, fast, and private.

The most common causes are: (1) Missing blank lines — Markdown requires a blank line before block-level elements like lists, headings, and code blocks to separate them from the preceding paragraph. (2) Mixed indentation — use consistent spaces (not tabs) for nested lists. (3) Incomplete table syntax — tables require a header row, a separator row (|---|), and at least one body row. The Tab key in this editor inserts two spaces, which helps with consistent indentation.