Markdown Viewer – A Fast, Privacy-First & Feature-Rich Online Editor

#productivity #showdev #webdev #markdown

Finding an online Markdown editor that is fast, privacy-first, fully client-side, and packed with modern features (like LaTeX, Mermaid diagrams, and one-click rich exporting) shouldn't be hard. Yet, many existing tools are either bloated with mandatory sign-ups, lack proper diagram/math rendering, or send your sensitive drafts to remote servers.

That’s why we built Markdown Viewer — a lightweight, zero-setup, fully interactive web application designed specifically for developers, technical writers, and content creators.

In this post, I’d love to walk you through why we built it, its core features, and the tech stack powering it.

Why Another Markdown Editor?

Most technical writers face a few common annoyances with existing tools:

Privacy Concerns: Many web editors upload your text to cloud servers for rendering or draft saving.
Missing Advanced Syntax: Writing technical papers or docs often requires math equations ($\text{LaTeX}$) and architecture diagrams ($\text{Mermaid}$), which aren't always supported smoothly.
Export & Publishing Friction: Converting Markdown into clean HTML with inline CSS for newsletters, WeChat articles, or styled PDFs is often tedious.
Bloated Workflows: Forced logins, heavy ads, or missing multi-tab support slow down quick editing tasks.

We wanted a tool that opens instantly, keeps 100% of data local to your browser, renders everything seamlessly, and lets you export in multiple formats effortlessly.

Key Features at a Glance

1. 100% Client-Side Privacy & Zero Setup

No registration required: Open the site and start typing immediately.
Client-Side Rendering: Powered by marked & CodeMirror 6, all rendering happens strictly inside your browser. Sanitized with DOMPurify to guard against XSS.
Offline & Local Storage: Auto-saves your work in localStorage without cloud tracking.

2. Math & Diagram Powerhouse

LaTeX Math Equations: Full support for inline $E = mc^2$ and block math $$ \int_0^\infty e^{-x^2} dx $$ via KaTeX (lazy-loaded for speed).
Interactive Mermaid Diagrams: Render flowcharts, sequence diagrams, Gantt charts, and state diagrams seamlessly. Includes a dedicated diagram toolbar to copy PNG/SVG or view in fullscreen.
GFM (GitHub Flavored Markdown): Tables, task lists, strikethrough, and auto-links. Checkboxes in the preview pane are interactive and sync back to your source code.

3. 50+ Custom Themes & Social Publishing

Preset Publishing Themes: Choose from over 50+ beautifully curated CSS themes (Classic, Minimal, Dark, Vibrant, MWeb style, and WeChat-optimized layouts).
Inline CSS Juice Engine: Automatically converts CSS rules into inline styles for seamless copy-pasting into newsletter tools or WeChat Official Accounts.

4. Versatile Import & Export Options

Multi-Format Export: Export your documents to Markdown (.md), standalone HTML, styled PDF (print/download), or high-res PNG images.
Long-Image Splitting: Automatically split long articles into fixed-size images for image-based sharing platforms.
Drag & Drop: Easily drop .md files directly into the editor.

5. Developer-Friendly Editor Experience

CodeMirror 6 Engine: Modern, performant editor core with line numbers, code folding, and One Dark / Light modes.
Bidirectional Sync Scrolling: Editor and preview scroll together in perfect percentage sync.
Multi-Tab Workspace: Work on multiple documents simultaneously with tab creation, renaming, and duplication.
Serverless URL Sharing: Share documents instantly without a database! Content is compressed with pako (gzip) and encoded into a clean #share= URL hash.

The Tech Stack

Built with modern web standards and performance in mind:

Framework: Next.js 16 + React 19 + TypeScript
Styling: Tailwind CSS v4 + Responsive CSS Variables
Editor: CodeMirror 6 (@codemirror/lang-markdown)
Parser & Sanitizer: marked + DOMPurify
Math & Visuals: KaTeX + Mermaid + highlight.js (190+ languages)
Compression: pako (zlib/gzip client-side compression)

What’s Next? (Roadmap)

We are actively improving Markdown Viewer based on community feedback. Some features currently on our roadmap include:

Editor Find & Replace (powered by @codemirror/search)
Enhanced Keyboard Shortcuts (Ctrl+1..6 for headings, Ctrl+B for bold)
Footnotes & Callout Alerts (> [!NOTE] / > [!WARNING])
AI Writing Assistant (optional API key integration for summaries & translations)
Local Directory / Workspace Management

DEV Community