A modern, feature-rich Markdown editor and viewer with Mermaid diagram and MathJax support.
- Overview
- Live Demo
- Features
- Tech Stack
- Getting Started
- Usage Guide
- Advanced Features
- Keyboard Shortcuts
- Customization
- Browser Support
- Documentation
- Security
- Performance
- Contributing
- License
- Acknowledgments
Markdown Viewer is a modern web-based Markdown editor and previewer designed to provide a smooth split-pane editing experience with live preview, syntax highlighting, Mermaid diagrams, MathJax equations, and emoji rendering. The app runs entirely in the browser and ships as a static site with CDN-hosted dependencies.
- ✅ Zero install for users: open
index.htmlor serve a static folder - ✅ Real-time preview with debounce
- ✅ Mermaid diagrams and MathJax equations
- ✅ Light/dark themes with system preference detection
- ✅ Export to Markdown, HTML, and PDF
- ✅ Responsive layout with mobile-friendly controls
Add your hosted URL here. If you do not have one yet, use a static host like GitHub Pages or Netlify.
- Real-time rendering with a debounced render loop
- GitHub-flavored Markdown via Marked.js
- Syntax highlighting via Highlight.js
- Emoji shortcodes rendered via JoyPixels
- Light and dark modes
- Automatic system theme detection on load
- Theme-aware Mermaid rendering
- Editor-only, split, and preview-only modes
- Resizable panes with a minimum width guard
- Optional synchronized scrolling in split mode
Render diagrams in fenced blocks:
graph TD
A[Start] --> B{Is it working?}
B -->|Yes| C[Great!]
B -->|No| D[Debug]
D --> B
Support for MathJax LaTeX syntax:
Inline: $E = mc^2$
Block:
$$\int_a^b f(x)\,dx = F(b) - F(a)$$
$$\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}$$
- Drag and drop
.mdor.markdownfiles - File picker import with the same extension filters
- Markdown (
.md) - HTML (
.html) with GitHub Markdown CSS and Highlight.js theme - PDF (
.pdf) via html2pdf.js
- One-click copy of raw Markdown
- Word count, character count, and reading time
- Tab key inserts two spaces for indentation
| Technology | Version | Purpose |
|---|---|---|
| HTML5 | - | Semantic structure |
| CSS3 | - | Responsive layout and theming |
| JavaScript (ES6+) | - | Application logic |
| Bootstrap | 5.3.2 | Layout and UI utilities |
- Highlight.js (v11.9.0)
- GitHub Markdown CSS (v5.3.0)
- html2pdf.js (v0.10.1)
- jsPDF (v2.5.1)
- html2canvas (v1.4.1)
- FileSaver.js (v2.0.5)
- pdfMake (v0.2.7)
- Bootstrap Icons (v1.11.3)
- JoyPixels Emoji Toolkit (v9.0.1)
- Space Grotesk (UI)
- IBM Plex Mono (code)
None. This is a static site that runs in any modern browser.
# Clone the repository
git clone https://github.com/akshitsutharr/md-viewer.git
# Navigate into the directory
cd md-viewer
# Start a local server (Python 3)
python -m http.server 8000Open http://localhost:8000 in your browser.
You can also open index.html directly without a server.
- Type or paste Markdown into the editor.
- The preview updates automatically.
- Switch view modes with the header buttons.
- Toggle sync scrolling when in split view.
- Import or export files using the toolbar.
Use fenced Mermaid blocks to render diagrams. The renderer initializes after each preview update to keep diagrams in sync with content.
MathJax runs after render to typeset formulas in both inline and block form.
HTML export wraps the sanitized output in a standalone page using GitHub Markdown CSS and a matching Highlight.js theme.
Ctrl/Cmd+S- Export MarkdownCtrl/Cmd+C- Copy MarkdownCtrl/Cmd+Shift+S- Toggle sync scrolling (split view only)Tab- Insert two spaces inside the editor
- Update theme colors in styles.css under the CSS variables section.
- Change render timing or limits in script.js (
RENDER_DELAY,MIN_PANE_PERCENT). - Adjust export settings in script.js (HTML template, PDF config).
- Modify sample content in script.js (
sampleMarkdown).
Supports the latest versions of Chrome, Edge, Firefox, and Safari on desktop and mobile. Older browsers may not fully support modern CSS features like color-mix or backdrop-filter.
- Markdown is parsed with Marked.js.
- Output is sanitized with DOMPurify.
- Code blocks are highlighted with Highlight.js.
- Mermaid diagrams are initialized and rendered.
- MathJax typesets equations.
- Markdown export saves the raw editor content.
- HTML export builds a standalone HTML file with styles.
- PDF export converts the preview content with html2pdf.js.
Markdown rendering can be a source of XSS if raw HTML is allowed. This project sanitizes output with DOMPurify, but you should still treat external Markdown as untrusted.
If you want stricter Mermaid rendering, set securityLevel to strict in the Mermaid initialization inside script.js.
- Rendering is debounced to reduce UI jitter.
- For large documents, consider increasing
RENDER_DELAYor disabling sync scrolling. - PDF export may take longer for large or media-heavy documents.
- Fork the repository
- Create a feature branch
- Make focused, well-scoped changes
- Open a pull request with a clear description
This project references the MIT license. See LICENSE for details.
Thanks to the open-source libraries that make this project possible:
- Marked.js
- Highlight.js
- DOMPurify
- Mermaid
- MathJax
- html2pdf.js
- Bootstrap and Bootstrap Icons