Fast, secure, and feature-rich - all running in your browser
Live Demo • Features • Screenshots • Usage • LicenseMarkdown Viewer is a professional, full-featured Markdown editor and preview application that runs entirely in your browser. It provides a GitHub-style rendering experience with a clean split-screen interface, allowing you to write Markdown on one side and instantly preview the formatted output on the other.
- GitHub-style Markdown rendering - See your Markdown exactly as it would appear on GitHub
- Live preview - Instantly see changes as you type
- Syntax highlighting - Beautiful code highlighting for multiple programming languages
- LaTeX math support - Render mathematical equations using LaTeX syntax
- Mermaid diagrams - Create diagrams and flowcharts within your Markdown; hover over any diagram to reveal a toolbar for zooming, downloading (PNG/SVG), and copying to clipboard
- Dark mode toggle - Switch between light and dark themes for comfortable viewing
- Export options - Download your content as Markdown, HTML, or PDF
- Import Markdown files - Drag & drop or select files to open
- Copy to clipboard - Quickly copy your Markdown content with one click
- Sync scrolling - Keep editor and preview panes aligned (toggleable)
- Content statistics - Track word count, character count, and reading time
- Fully responsive - Works on desktop and mobile devices
- Emoji support - Convert emoji shortcodes into actual emojis
- 100% client-side - No server processing, ensuring complete privacy and security
- No sign-up required - Use instantly without any registration
- Writing Markdown - Type or paste Markdown content in the left editor panel
- Viewing Output - See the rendered HTML in the right preview panel
- Importing Files - Click "Import" or drag and drop .md files into the interface
- Exporting Content - Use the "Export" dropdown to download as MD, HTML, or PDF
- Toggle Dark Mode - Click the moon icon to switch between light and dark themes
- Toggle Sync Scrolling - Enable/disable synchronized scrolling between panels
When a Mermaid diagram is rendered, hover over it to reveal a small toolbar with the following actions:
| Button | Action |
|---|---|
| ⛶ (arrows) | Open diagram in a zoom/pan modal |
| PNG | Download the diagram as a PNG image |
| 📋 (clipboard) | Copy the diagram image to the clipboard |
| SVG | Download the diagram as an SVG file |
Inside the zoom modal you can:
- Zoom in / out using the buttons or the mouse wheel
- Pan by clicking and dragging the diagram
- Reset zoom and position with the Reset button
- Download PNG or SVG directly from the modal
- Close with the × button or by pressing
Escape
- Headings (# H1, ## H2, etc.)
- Bold and italic text
Strikethrough- Links
- Images
- Lists (ordered and unordered)
- Tables
- Code blocks with syntax highlighting
- Blockquotes
- Horizontal rules
- Task lists
- LaTeX equations (inline and block)
- Mermaid diagrams
- And more!
- HTML5
- CSS3
- JavaScript
- Bootstrap - Responsive UI framework
- Marked.js - Markdown parser
- highlight.js - Syntax highlighting
- MathJax - Mathematical expressions
- Mermaid - Diagrams and flowcharts
- DOMPurify - HTML sanitization
- html2canvas.js + jsPDF- PDF generation
- FileSaver.js - File download handling
- JoyPixels - Emoji support
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the project
- Create your feature branch (
git checkout -b amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
The Markdown Viewer has undergone significant evolution since its inception. What started as a simple markdown parser has grown into a full-featured, professional application with multiple advanced capabilities. By comparing the current version with the original version, you can see the remarkable progress in UI design, performance optimization, and feature implementation.
Developed with ❤️ by ThisIs-Developer