Live Preview · GFM · Tables · Export HTML

Markdown Editor
with Live Preview

Write Markdown on the left, see the beautifully rendered preview on the right — instantly. Export to HTML or copy formatted content.

✏️ Markdown Source

👁️ Preview Sync ON

A Full-Featured Markdown Editor

Everything you need to write clean Markdown documents — right in your browser.

⚡

Live Preview

See rendered output as you type with synchronized scrolling between editor and preview.

📊

GFM Tables

Full GitHub Flavored Markdown support including tables, task lists, strikethrough, and fenced code blocks.

🛠️

Rich Toolbar

One-click buttons for bold, italic, headings, lists, tables, code blocks, links, and images.

📤

Multiple Exports

Copy raw Markdown, copy rendered HTML, download .md file, or print as PDF.

`; const blob = new Blob([content], {type:'text/html'}); const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'document.html'; a.click(); } function printPreview() { const win = window.open('', '_blank'); win.document.write(`Print Preview${document.getElementById('mdPreview').innerHTML}`); win.document.close(); win.print(); } /* ── Scroll sync ── */ function syncScroll(el) { if (!syncEnabled || syncLock) return; syncLock = true; const editor = document.getElementById('mdEditor'); const preview = document.getElementById('mdPreview'); const pct = el.scrollTop / (el.scrollHeight - el.clientHeight); const other = el === editor ? preview : editor; other.scrollTop = pct * (other.scrollHeight - other.clientHeight); setTimeout(() => syncLock = false, 50); } function toggleSync() { syncEnabled = !syncEnabled; document.getElementById('syncBadge').textContent = syncEnabled ? 'Sync ON' : 'Sync OFF'; document.getElementById('syncBadge').style.background = syncEnabled ? 'var(--accent2)' : 'var(--muted)'; } /* ── Keyboard shortcuts ── */ document.addEventListener('keydown', e => { if (e.target !== getEditor()) return; if ((e.ctrlKey||e.metaKey) && e.key === 'b') { e.preventDefault(); wrap('**','**'); } if ((e.ctrlKey||e.metaKey) && e.key === 'i') { e.preventDefault(); wrap('*','*'); } // Tab key if (e.key === 'Tab') { e.preventDefault(); const el = getEditor(); const pos = el.selectionStart; el.value = el.value.slice(0,pos) + ' ' + el.value.slice(el.selectionEnd); el.selectionStart = el.selectionEnd = pos + 2; renderMd(); } }); function clearMd() { getEditor().value = ''; renderMd(); localStorage.removeItem('md-content'); } function loadSample() { getEditor().value = `# Welcome to the Markdown Editor 🎉 ## Features This editor supports **GitHub Flavored Markdown** (GFM) including: - ~~Strikethrough~~ text - **Bold** and *italic* formatting - Inline \`code\` and fenced code blocks - Tables, task lists, and blockquotes ## Code Example \`\`\`javascript function greet(name) { return \`Hello, \${name}!\`; } console.log(greet('World')); \`\`\` ## Task List - [x] Live preview - [x] Toolbar shortcuts - [x] Export to HTML - [ ] Add more features ## Table | Feature | Status | Priority | |---------|--------|----------| | Live Preview | ✅ Done | High | | Export | ✅ Done | High | | Dark Mode | 🔄 Planned | Medium | ## Blockquote > *"Simplicity is the soul of efficiency."* > — Austin Freeman --- Happy writing! 📝`; renderMd(); } // Restore from localStorage const saved = localStorage.getItem('md-content'); if (saved) { getEditor().value = saved; renderMd(); } else loadSample();

Markdown Editorwith Live Preview