DEV Community

Cover image for I Built the Most Beautiful Markdown Viewer for Developers (And It's Free)
Bum Kom
Bum Kom

Posted on

I Built the Most Beautiful Markdown Viewer for Developers (And It's Free)

#markdown #mermaid #latex #productivity

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 the same 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. I wanted an experience that felt like reading a premium documentation site—something with:

✨ Beautiful Typography (Inter & JetBrains Mono)
🌫️ Glassmorphism UI
🌓 Perfect Dark Mode
📊 Rich Diagram Support
So, I built Markdown Viewer Premium, and I want to share how it transforms the way you view documentation.

The Problem with Default Viewers
Most browser extensions for Markdown are:

Outdated: Built years ago, using old styling.
Basic: Just standard HTML, no syntax highlighting or diagrams.
Ugly: No attention to whitespace, readability, or aesthetics.
Meet Markdown Viewer Premium 🚀
This isn't just a parser; it's a rendering engine designed for aesthetics and readability.

Key Features

  1. 🎨 Stunning "Glass" Aesthetics
    I spent a lot of time tweaking the CSS variables (using Tailwind) to get that perfect "frosted glass" look. The sidebar, table of contents, and code blocks all have a subtle transparency that blurs the background, giving it a modern OS feel.

  2. 🧜‍♀️ Mermaid Diagrams with Zoomable Popup
    Markdown Viewer Premium automatically renders Mermaid diagrams into clear SVGs. Click any diagram to open it in a zoomable lightbox—perfect for complex flowcharts that need inspection.

  3. 💻 Rich Code, Math & GFM Support
    Syntax Highlighting: Beautiful updates for all major languages.
    GFM Support: Full support for Task Lists [ ], Tables, and Strikethrough.
    LaTeX Support: Write $ E = mc^2 $ and see it rendered instantly with KaTeX.
    Copy Button: One-click copy for code snippets.

  4. 🖨️ Professional PDF Export
    Need to share? Hit Ctrl+P (or Cmd+P) to export your beautifully rendered markdown as a clean, styled PDF.

  5. 🛠 Power User Tools
    Raw View: Instant toggle between rendered view and raw markdown text.
    Theme Switching: seamless Toggle between Light and Dark modes.
    Smart TOC: Sticky table of contents for easy navigation.

  6. 🐙 Seamless GitHub Integration
    Directlypaste a GitHub file URL (blob or raw), and the viewer will automatically fetch and render it. No need to download the file first. Perfect for reading documentation directly from repositories.

Why Use This?
I built this to fix the pain points of existing tools:

Readability: Most viewers ignore line height and typography. This one prioritizes them.
Completeness: It doesn't break on complex diagrams or math equations.
Speed: It loads instantly, even for large documents.
Try it out!
I built this to scratch my own itch, but I think you'll love it too. If you care about the aesthetics of your tools, give it a try.

Link to Chrome Web Store
https://chromewebstore.google.com/detail/markdown-viewer-premium/abnpdibfmmdcjhdakgjeiepimokkhjjo?authuser=0&hl=en
Let me know what you think in the comments! 👇

Top comments (0)