Markdown Viewer

A Markdown Editor That Lives in Your Browser, Desktop, and a Single URL.

Fast GitHub-style Markdown editing with live preview, diagrams, LaTeX, syntax highlighting, PDF export, and multi-tab support across web, desktop, and Docker.

Live Production Demo · Documentation Wiki · Issue Tracker · Releases

License Latest release Last commit Stars

Markdown Viewer - Live split-screen Markdown editor and previewer with GFM rendering, tabbed multi-document workspace, and dark theme support

## Table of Contents - [About the Project](#about-the-project) - [Key Features](#key-features) - [System Architecture](#system-architecture) - [High-Level Architecture Diagram](#high-level-architecture-diagram) - [Core File Walkthrough](#core-file-walkthrough) - [Under-the-Hood Subsystems Deep-Dive](#under-the-hood-subsystems-deep-dive) - [1. Global State & Session Persistence](#1-global-state--session-persistence) - [2. Document Tab & Session Lifecycle](#2-document-tab--session-lifecycle) - [3. Tab Overflow & Navigation](#3-tab-overflow--navigation) - [4. Responsive Pane Resizer & View Mode Layout Controller](#4-responsive-pane-resizer--view-mode-layout-controller) - [5. Rich Text Editor History & Undo/Redo Engine](#5-rich-text-editor-history--undoredo-engine) - [6. Dynamic Line-Number Gutter & Selection Highlighter](#6-dynamic-line-number-gutter--selection-highlighter) - [7. Web Worker Segmented Markdown Compilation & Sanitization](#7-web-worker-segmented-markdown-compilation--sanitization) - [8. Throttled Bidirectional Scroll Synchronization](#8-throttled-bidirectional-scroll-synchronization) - [9. Interactive Mermaid Diagram & MathJax LaTeX Renderer](#9-interactive-mermaid-diagram--mathjax-latex-renderer) - [10. Draggable Find/Replace Search & Diff Preview Engine](#10-draggable-findreplace-search--diff-preview-engine) - [11. Layout-Aware PDF Export & URL Sharing Subsystem](#11-layout-aware-pdf-export--url-sharing-subsystem) - [Getting Started & Installation](#getting-started--installation) - [Option 1: Docker (Pre-built Image)](#option-1-docker-pre-built-image) - [Option 2: Docker Compose (Local Build)](#option-2-docker-compose-local-build) - [Option 3: Local Static Web Server](#option-3-local-static-web-server) - [Option 4: Desktop Application](#option-4-desktop-application) - [Usage Guide & Keyboard Shortcuts](#usage-guide--keyboard-shortcuts) - [Project Directory Structure](#project-directory-structure) - [Built With (Technology Stack)](#built-with-technology-stack) - [Contributing & Code Quality](#contributing--code-quality) - [Showcase & Community Projects](#showcase--community-projects) - [License](#license) - [Contact & Support](#contact--support) --- ## About the Project **Markdown Viewer** is an advanced, fully client-side editing suite and previewer optimized for a professional documentation workflow. Running completely inside the browser, it renders GitHub-Flavored Markdown (GFM), math formulas, and architectural diagrams in real time. Designed with privacy and performance at its core, the application performs all parsing in a background worker thread, employs incremental DOM patching to minimize browser repaints, and supports native offline capabilities via a Service Worker proxy. It is also packaged as a lightweight native desktop shell using the Neutralinojs framework. --- ## Key Features * **🖊️ Decoupled Split-Screen Editing:** Type Markdown in a customized text editor with a dynamic line-number gutter and see updates render instantly. * **📐 LaTeX Math Notation:** Full integration with MathJax for typesetting inline and block mathematical formulas.

Markdown Viewer - LaTeX math editor rendering display and inline mathematical equations using MathJax in dark mode

* **📊 Interactive Mermaid Diagrams:** Render flowcharts, Gantt charts, sequence diagrams, and more. Diagrams feature a toolbar for zooming, panning, copying, and exporting.

Markdown Viewer - Rendered interactive Mermaid.js diagram flowchart in preview with zoom, pan, and SVG image export toolbar

* **⚡ Off-Thread Parsing & Incremental Patching:** Document parsing is offloaded to a background Web Worker. Rendered updates patch only changed DOM nodes to keep browser resources free. * **📤 Professional Export Suite:** Export documents as raw Markdown (`.md`), standalone formatted HTML (`.html`) with inline styles, or high-resolution paginated PDF (`.pdf`). * **📥 Multi-Source File Import:** Drag & drop local files or browse and download multiple Markdown files from a public GitHub repository URL.

Markdown Viewer - Import Markdown files from public GitHub repository tree with recursive directory browser and tab integration

* **🔗 URL-Encoded Compressed Sharing:** Compress your document's text utilizing DEFLATE compression and encode it directly into a shareable URL hash. No server-side database required.

Markdown Viewer - Serverless document sharing using URL-encoded DEFLATE compressed markdown hash in edit or view-only mode

* **💾 Multi-Document Tab bar:** Organize multiple files inside tab components featuring drag-and-drop reordering, title renaming, and local session persistence. * **🔒 Privacy & Security Focus:** No analytics, tracking beacons, or backend servers. HTML output is sanitized via DOMPurify to eliminate Cross-Site Scripting (XSS) threats. --- ## System Architecture Markdown Viewer is structured as a client-side single-page application (SPA). The diagram below outlines how the UI thread, background worker, service worker, browser cache, native desktop bridges, and third-party libraries interact. ### High-Level Architecture Diagram ```mermaid graph TD %% Client Interface Group subgraph UI ["Client Interface (Main Thread)"] HTML["index.html
(DOM Tree)"] CSS["styles.css
(Custom Themes & Reset)"] Script["script.js
(UI Orchestration)"] Editor["Markdown Editor
(Textarea + Gutter)"] Preview["Preview Pane
(Isolated Render Area)"] Modal["Mermaid Modal
(Zoom & Drag-to-Pan)"] end %% Background Web Worker Group subgraph Worker ["Web Worker (Background Thread)"] PWorker["preview-worker.js
(Off-Thread Compiler)"] MarkedLib["Marked.js
(GFM Parser)"] HljsLib["Highlight.js
(Syntax Color)"] end %% Storage Group subgraph Storage ["Local Storage & Network Proxy"] LS["localStorage
(Tabs, Settings, Session)"] Cache["Browser Cache
(Service Worker sw.js)"] end %% Third-Party Utilities subgraph CDNs ["Third-Party CDN Libraries (Lazy Loaded)"] MathJax["MathJax.js
(LaTeX Math)"] Mermaid["Mermaid.js
(Diagrams)"] PDF["jsPDF & html2canvas
(PDF Export Pipeline)"] Pako["Pako.js
(zlib share encoder)"] end %% Native Desktop Layer subgraph Desktop ["NeutralinoJS Desktop Shell"] Neu["Neutralino.js Bridge
(Native File System APIs)"] end %% Interactions Editor -- "1. Input Keystrokes" --> Script Script -- "2. Size-Aware Debounced Text" --> PWorker PWorker -- "3. Load Scripts" --> MarkedLib PWorker -- "3. Load Scripts" --> HljsLib PWorker -- "4. Returns Compiled HTML Blocks & Hashes" --> Script Script -- "5. Incremental Patching (replaceWith)" --> Preview Script -- "6. Debounced State Auto-Save" --> LS %% Dynamic Loading triggers Script -- "Lazy Load (Math strings detected)" --> MathJax Script -- "Lazy Load (Mermaid block detected)" --> Mermaid Script -- "Lazy Load (On PDF Export click)" --> PDF Script -- "Lazy Load (On Share click)" --> Pako %% Downstream Rendering outputs MathJax -- "Inject Math formulas" --> Preview Mermaid -- "Draw SVGs + Toolbars" --> Preview Preview -- "Double click diagram" --> Modal PDF -- "Capture sandboxed canvas" --> Script %% Network Proxy Caching Cache -. "Network-First (App Assets)" .-> HTML Cache -. "Network-First (App Assets)" .-> Script Cache -. "Network-First (App Assets)" .-> CSS Cache -. "Cache-First (5.4MB bundles)" .-> CDNs %% Desktop Logic Script -- "Access OS API if wrapped" --> Neu ``` ### Core File Walkthrough 1. **`index.html`**: Establishes layout structures, floating panel anchors, and imports CSS files alongside core scripts using defer hooks. It keeps the default fallback markdown inside a `