Markdown Writer — Free Online Tool

What is Markdown Editor & Syntax Guide (GFM, Live Preview)?

Markdown editor provides live editing environment for writing Markdown (.md files) with instant preview. Write Markdown syntax (# heading, **bold**, [link](url)) in editor, see formatted HTML output in preview pane. Supports GitHub Flavored Markdown (GFM): tables (| col |), task lists (- [ ] task), fenced code blocks (```language), strikethrough (~~text~~), autolinks (URLs). Features: split-pane editor (edit + preview side-by-side), syntax highlighting (keywords, links, code), auto-scroll sync (preview follows cursor), cheatsheet (quick reference), export (HTML, PDF, Markdown download), dark mode, autosave (local storage). Tool same as markdown-preview.json but this focuses more on editing workflow.

• Live preview: Type Markdown → see HTML instantly. No save/reload. Split-pane: editor (left) + preview (right). Auto-scroll: cursor in editor → preview scrolls to match. Real-time rendering.
• Syntax highlighting: Editor highlights: # (headings), **bold**, *italic*, [links](url), ```code```, > quotes. Color-coded for readability. Catches syntax errors (missing ], unclosed `).
• GFM support: Tables, task lists, strikethrough, fenced code blocks, autolinks. Same rendering as GitHub README. Preview = how it looks on GitHub.
• Cheatsheet & help: Built-in Markdown reference: # heading, **bold**, [link](url), , ```code```, - list. Click to insert syntax. Learn by example.
• Export options: Download as: .md (Markdown file), .html (styled HTML), .pdf (print-friendly). Markdown for git, HTML for website, PDF for sharing.

Why use markdown editor?

Writing Markdown in plain text editor = no preview (syntax errors unnoticed). This tool shows exactly how Markdown will render.

• Instant feedback: See formatting immediately. Type ## → preview shows <h2>. Catch errors: broken link ([text]()), malformed table (| col). Faster than edit → save → preview → repeat.
• GitHub README preview: Write README.md, see how it looks on GitHub. Test tables, code blocks, task lists. Avoid pushing broken Markdown to GitHub (embarrassing typos).
• Learn Markdown interactively: Try syntax, see result. Experiment: **bold** vs *italic*, # vs ##, - vs 1.. Built-in cheatsheet (examples). Faster than reading docs.
• Syntax highlighting: Editor shows Markdown structure (headings blue, links green, code orange). Easier to scan, find headings, fix errors. Plain text editor = all one color (hard to read).
• Export flexibility: Write once, export multiple formats: Markdown (version control), HTML (blog post), PDF (document). No manual conversion. Markdown = source of truth.
• Autosave & offline: Autosaves to browser local storage (no lost work). Works offline (no internet required). Private (no server upload). Always available.

When to use markdown editor

Use whenever you write or edit Markdown files.

• Writing GitHub README.md (preview before pushing).
• Creating documentation (technical docs, wikis: Docusaurus, VuePress).
• Writing blog posts (Markdown → HTML for Jekyll, Hugo, Gatsby).
• Taking notes (structured notes with headings, lists, code snippets: Obsidian, Notion).
• Learning Markdown syntax (interactive examples, instant feedback).
• Editing existing .md files (preview changes, check formatting).
• Creating tables (Markdown table syntax tricky, preview shows alignment).
• Writing tutorials with code examples (fenced blocks, syntax highlighting).

How to use markdown editor

Write Markdown in editor, see live preview, export if needed.

1. Start typing Markdown: Type in left pane: # Heading, **bold**, [link](url), , ```code```. Or load existing .md file (open from file picker).
2. See live preview: Right pane shows rendered HTML. Updates as you type (no save needed). Auto-scroll: cursor in editor → preview scrolls to match section.
3. Use cheatsheet: Click Help → shows Markdown syntax reference (headings, bold, links, images, lists, tables, code). Click example to insert in editor.
4. Add code blocks: Fenced blocks: ```javascript\ncode\n```. Specify language for syntax highlighting (javascript, python, sql). Inline code: `code` (backticks).
5. Create tables: Markdown table: | Header 1 | Header 2 |\n|----------|----------|\n| Cell 1 | Cell 2 |. Preview shows formatted table. Check alignment.
6. Export file: Download → .md (Markdown file for git), .html (styled with CSS), .pdf (print-friendly). Or copy Markdown to clipboard.
7. Toggle dark mode (optional): Dark mode for editor and preview (reduces eye strain). Syntax highlighting adapts to theme. Saves preference to local storage.

Key features

• Split-pane editor: Edit (left) + preview (right) side-by-side. Or tabbed view (mobile). Adjustable split (drag divider). Full-screen mode (editor or preview only).
• Live preview: Real-time rendering. Type Markdown → HTML updates instantly. No save/reload. Auto-scroll sync (editor cursor position → preview scroll position).
• Syntax highlighting: Editor: highlights headings, bold, italic, links, code. Preview: syntax highlighting for code blocks (100+ languages via Prism.js/highlight.js).
• GitHub Flavored Markdown: Tables, task lists (- [ ] Task), fenced code blocks, strikethrough (~~text~~), autolinks. Same rendering as GitHub README.
• Built-in cheatsheet: Quick reference: headings (#), bold (**), links ([]()), images (![]()), code (```), lists (-, 1.), tables (| |). Click to insert syntax.
• Export options: Download as: .md (Markdown), .html (styled, syntax highlighting), .pdf (print-friendly, page breaks). Or copy to clipboard.
• Autosave & offline: Autosaves to browser local storage (recover after browser crash). Works offline (no internet). Private (no server upload).

Common use cases

• GitHub README: Write README.md: # Project Title, ## Installation, ```bash\nnpm install\n```, - Features, | Comparison |. Preview before git push. See exact GitHub rendering.
• Technical documentation: Write docs: ## API Endpoints, ### GET /users, ```json\n{"id": 1}\n```. Export HTML for Docusaurus, VuePress. Or Markdown for version control.
• Blog post: Write post: # Title, ## Sections, , [link](url). Export HTML for Jekyll/Hugo. Or Markdown for Medium, Dev.to (support Markdown).
• Note-taking: Structured notes: ## Meeting Notes, - Action items, ```sql\nSELECT * FROM users\n```. Export PDF for sharing, Markdown for Obsidian, Notion.
• Tutorial with code: Write tutorial: # How to Build API, ## Step 1, ```javascript\nconst express = require('express');\n```. Syntax highlighting for code examples.
• Changelog: Write CHANGELOG.md: ## [1.2.0] - 2024-01-15, ### Added, ### Fixed. Preview formatting. GitHub renders in repo.

Examples

Markdown syntax examples (same as markdown-preview).

# Main Title\n## Subtitle\n**Bold** and *italic*.

<h1>Main Title</h1>\n<h2>Subtitle</h2>\n<p><strong>Bold</strong> and <em>italic</em>.</p>

- Item 1\n- Item 2\n\n- [ ] Task\n- [x] Done

<ul><li>Item 1</li><li>Item 2</li></ul>\n<ul><li>☐ Task</li><li>☑ Done</li></ul>

[GitHub](https://github.com)\n![Logo](logo.png)

<a href='https://github.com'>GitHub</a><br><img src='logo.png' alt='Logo'>

```javascript\nconst x = 10;\nconsole.log(x);\n```

<pre><code class='language-javascript'><span class='keyword'>const</span> x = <span class='number'>10</span>;\nconsole.log(x);</code></pre>

| Name | Age |\n|------|-----|\n| Alice | 30 |

<table><tr><th>Name</th><th>Age</th></tr><tr><td>Alice</td><td>30</td></tr></table>

Technical reference

Markdown syntax reference (same as markdown-preview tool):

Headings

# H1, ## H2, ### H3, #### H4, ##### H5, ###### H6. Alternative: H1\n==, H2\n--. Use # for consistency.

Emphasis

**bold** or __bold__, *italic* or _italic_, ***bold italic***. Strikethrough: ~~text~~ (GFM).

Lists

Unordered: - item or * item. Ordered: 1. item. Nested: indent 2 spaces. Task list: - [ ] unchecked, - [x] checked (GFM).

Links

[text](url), [text](url 'title'). Reference: [text][id], [id]: url. Autolink: <url> or url (GFM).

Images

, . Reference: ![alt][id], [id]: url. No width/height (use HTML <img>).

Code

Inline: `code`. Fenced block: ```language\ncode\n```. Indented: 4 spaces (legacy). Use fenced for syntax highlighting.

Tables (GFM)

| Header 1 | Header 2 |\n|----------|----------|\n| Cell 1 | Cell 2 |. Alignment: |:---|, |:---:|, |---:|.

Blockquotes

> Quote. Nested: >> Inner. Multi-line: > Line 1\n> Line 2.

Horizontal rule

--- or *** or ___ (3+ chars). Creates <hr>.

Escaping

\* → * (backslash escapes Markdown syntax). Escape: \, \*, \_, \#, \[, \], \`, \~.

Common mistakes to avoid

Missing blank line before lists, code blocks (doesn't render)

Why it happens: Markdown requires blank line before block elements. text\n- list (no blank line) → list doesn't render (treated as paragraph). Common when copying Markdown.

How to avoid it: Add blank line before lists, code, blockquotes. Example: Paragraph\n\n- List. Or use fenced code blocks (``` doesn't require blank line).

Using wrong number of backticks for code (` vs ``` vs ````)

Why it happens: Inline code: `code`. Block: ```code```. If code contains ```, use ```` to escape. Wrong count = broken rendering.

How to avoid it: Inline: `code`. Block: ```\ncode\n```. Code with ```: use ```` (one more than code). Preview shows errors immediately.

Incorrect table syntax (missing pipe, wrong separator)

Why it happens: Tables require: | Header |\n|--------|\n| Data |. Missing pipe (|), wrong separator (===), no header = table doesn't render. Preview shows as plain text.

How to avoid it: Use tool to create table (preview shows formatting). Separator: at least 3 dashes (---). Pipes at start/end optional.

Forgetting language in fenced code blocks (no syntax highlighting)

Why it happens: ```\ncode\n``` (no language) = no syntax highlighting (renders as plain text). ```javascript\ncode\n``` = syntax highlighting (keywords, strings colored).

How to avoid it: Specify language: ```javascript, ```python, ```sql. Preview shows syntax highlighting. If unknown, use ```text or omit.

Not checking preview before publishing (broken formatting)

Why it happens: Markdown errors (missing ], unclosed `, malformed table) not visible in editor. Preview shows exactly how it renders. Errors caught before publishing.

How to avoid it: Always check preview before git push, publishing. Look for: broken links, malformed tables, incorrect headings. Fix in editor, verify in preview.

Frequently asked questions

What is the difference between this and markdown-preview tool?

Same tool, different name/focus. markdown-preview = viewing/converting Markdown. markdown-editor = editing workflow (autosave, syntax highlighting, export). Both have live preview, GFM support.

Does autosave work across browser sessions?

Yes, uses browser local storage (persists across sessions). Work saved even if browser crashes. Clear browser data = autosave lost. Export to .md file for permanent backup.

Can I use HTML in Markdown?

Yes, most Markdown parsers allow HTML (<img>, <details>, <video>). Useful for features Markdown doesn't support (image sizing, custom styling). But less portable (some parsers strip HTML).

Why doesn't my list render?

Missing blank line before list. Markdown requires blank line before block elements. Fix: Paragraph\n\n- List. Or indent list (nested list needs 2-space indent).

What is GFM and do I need it?

GFM = GitHub Flavored Markdown (tables, task lists, strikethrough). If writing for GitHub README, use GFM. For standard Markdown (Jekyll, Hugo), GFM also works (backward compatible with CommonMark).

Can I export to Word (.docx)?

Not directly. Export to HTML, open in Word, save as .docx. Or use Pandoc (command-line: pandoc file.md -o file.docx). HTML export works for most use cases.

How do I create line breaks without starting new paragraph?

Two spaces at end of line (text \n) or backslash (text\\n). Single \n doesn't break (joins into paragraph). Blank line = new paragraph.

References

• GitHub Flavored Markdown Spec
• Markdown Guide
• CommonMark Spec
• Markdown Cheatsheet