Hassan Ali
ReadMD

ReadMD
New

Completed May 2026

TypeScriptViteMermaid.jsKaTeXCloudflare
View Code Live Website

Overview

ReadMD is a specialized browser-based tool designed for developers, researchers, and technical writers who need a high-performance environment to read and review markdown documents. Unlike traditional online viewers, ReadMD prioritizes absolute privacy by operating entirely on the client side — your data never touches a server.

It solves the common problem of “broken” rendering in standard viewers by providing first-class support for advanced extensions like Mermaid diagrams and LaTeX math expressions.

Key Features

  • Privacy-First Architecture — Zero data persistence. All rendering happens in your browser’s memory and is cleared upon closing the tab.
  • Advanced Rendering Engine — Full GFM (GitHub Flavored Markdown) support combined with:
    • Mermaid.js for flowcharts, Gantt charts, and sequence diagrams.
    • KaTeX for high-quality mathematical notation.
    • Code Highlighting for 20+ programming languages.
  • Enhanced Reading UX — Tools designed for focus:
    • Auto-generated TOC for easy navigation.
    • Reading Progress Bar and document search (Ctrl+F).
    • Command Palette (Ctrl+K) for rapid action execution.
  • Customizable Environment — Tailor the interface with Light/Dark modes, adjustable font sizes, line heights, and content widths.
  • Flexible Input/Output — Drag-and-drop local .md files, paste raw text, or load via URL. Export as PDF or HTML with one click.

Technologies Used

  • Core: TypeScript, CSS, HTML5
  • Build System: Vite
  • Libraries: Mermaid.js, KaTeX, Markdown-it (parsing)
  • Infrastructure: Cloudflare Pages (Edge Deployment)

How It Works

  1. Local Processing — When you provide content, the TypeScript-based engine parses the raw markdown locally.
  2. Context-Aware Rendering — The system detects specialized blocks (like mermaid or math) and injects the necessary CSS/JS components dynamically.
  3. Optimized Layout — A fluid, responsive interface adjusts to your screen size while providing desktop-class typography controls.

Links & Resources

Built with ❤️ by Hassan Ali