I Built the Most Beautiful Markdown Viewer for Developers (And It's Free)
Source: Dev.to
Why is reading Markdown still so… ugly?
As developers, we live in Markdown. We write documentation, READMEs, notes, and blog posts in it. But whenever I opened a local .md file in my browser, I was greeted with raw, unstyled text or a 90s‑style HTML render that looked like it was designed by a backend engineer in 1998 (no offense, backend friends!).
I wanted something better—an experience that felt like reading premium documentation, with:
- ✨ Beautiful typography (Inter & JetBrains Mono)
- 🌫️ Glassmorphism UI
- 🌓 Perfect dark mode
- 📊 Rich diagram support
So, I built Markdown Viewer Premium, and here’s how it transforms the way you view documentation.
The Problem with Default Viewers
Most browser extensions for Markdown are:
- Outdated – built years ago with old styling.
- Basic – just standard HTML, no syntax highlighting or diagrams.
- Ugly – ignore whitespace, readability, and aesthetics.
Meet Markdown Viewer Premium 🚀
This isn’t just a parser; it’s a rendering engine designed for aesthetics and readability.
Key Features
🎨 Stunning “Glass” Aesthetics
The CSS (built with Tailwind) creates a frosted‑glass look. The sidebar, table of contents, and code blocks have subtle transparency that blurs the background, giving a modern OS feel.
🧜♀️ Mermaid Diagrams with Zoomable Popup
Mermaid diagrams are rendered as clear SVGs. Click any diagram to open it in a zoomable lightbox—perfect for complex flowcharts.
💻 Rich Code, Math & GFM Support
- Syntax Highlighting for all major languages.
- GFM Support: task lists, tables, strikethrough.
- LaTeX Support: write
$E = mc^2$and see it rendered instantly with KaTeX. - Copy Button: one‑click copy for code snippets.
🖨️ Professional PDF Export
Press Ctrl+P (or Cmd+P) to export the rendered markdown as a clean, styled PDF.
🛠 Power User Tools
- Raw View – toggle instantly between rendered view and raw markdown.
- Theme Switching – seamless toggle between light and dark modes.
- Smart TOC – sticky table of contents for easy navigation.
🐙 Seamless GitHub Integration
Paste a GitHub file URL (blob or raw) and the viewer fetches and renders it automatically—no need to download the file first.
Why Use This?
- Readability – proper line height and typography.
- Completeness – handles complex diagrams and math equations without breaking.
- Speed – loads instantly, even for large documents.
Try It Out!
If you care about the aesthetics of your tools, give it a try.
Link to Chrome Web Store
Let me know what you think in the comments! 👇