A free, client-side Markdown editor with live preview. No sign-up, no server, no build step — runs entirely in the browser.
🔗 Live Demo: jimit105.github.io/markdown-renderer
- Live Preview — Rendered output updates as you type (< 100ms)
- GitHub Flavored Markdown — Tables, task lists, strikethrough
- Syntax Highlighting — Language-specific code highlighting (JS, Python, HTML, CSS, TypeScript, JSON, and more)
- Mermaid Diagrams — Flowcharts, sequence diagrams, class diagrams, Gantt charts
- Dark Mode — Toggle between light/dark themes, respects system preference, persisted in localStorage
- Shareable Links — Compress editor content into a URL and share it (lz-string compression in the hash)
- Responsive Layout — Side-by-side on desktop, stacked on mobile (768px breakpoint)
- Resizable Panels — Drag the divider to adjust editor/preview split (mouse + touch)
- SEO Optimized — Open Graph, Twitter Cards, JSON-LD structured data
- Google Analytics — Ready to plug in your Measurement ID
Open index.html in a browser. That's it.
To share your markdown, click the 🔗 button — it compresses the content into the URL and copies it to your clipboard. Anyone with the link sees the same content.
# Headings
**bold**, *italic*, ~~strikethrough~~
[links](https://example.com) and 
- Unordered lists
1. Ordered lists
- [x] Task lists
| Tables | Work |
|--------|------|
| Yes | They do |
> Blockquotes
`inline code` and fenced code blocks:
```javascript
const hello = "world";
```
```mermaid
graph TD
A-->B-->C
```| Library | Purpose | CDN |
|---|---|---|
| marked.js v12 | Markdown parsing | cdnjs |
| highlight.js v11.9 | Syntax highlighting | cdnjs |
| Mermaid v10.9 | Diagram rendering | cdnjs |
| lz-string v1.5 | URL compression for sharing | cdnjs |
No npm install, no build step. Three files (index.html, style.css, app.js) plus CDN references.