Open Markdown

A fast, native macOS/Windows/Linux desktop app for viewing Markdown files with live preview, syntax highlighting, and Mermaid diagram support.

Features

• GitHub-flavored Markdown - Tables, task lists, strikethrough, and more
• Syntax Highlighting - Code blocks with language detection and theme-aware colors
• Mermaid Diagrams - Flowcharts, sequence diagrams, ERDs, and more
• Live Reload - Automatically updates when the file changes, with change highlighting
• Multi-Window - Open multiple files side by side (Cmd+N)
• Dark/Light Theme - Follows system preference or manual toggle
• Drag & Drop - Drop markdown files directly into the app
• Find in Page - Search within rendered content (Cmd+F)
• Native Performance - Built with Electron for a smooth experience

Installation

Mac App Store (recommended for macOS):

Or download the latest release from the Releases page:

• macOS: .dmg or .zip
• Windows: .exe installer
• Linux: .deb or .rpm

Usage

1. Open a file: Click the "Open" button or use Cmd+O (macOS) / Ctrl+O (Windows/Linux)
2. Drag & Drop: Drag a .md file directly into the app window
3. New window: Cmd+N to open additional windows for side-by-side viewing
4. Toggle theme: Click the theme button in the toolbar to switch between light and dark mode

The app will automatically reload when the file is modified externally.

Development

Prerequisites

• Node.js 20+
• pnpm 10+

Setup

# Clone the repository
git clone https://github.com/ptheofan/open-markdown.git
cd markdown-viewer

# Install dependencies
pnpm install

Running Locally

# Start the app in development mode with hot reload
pnpm start

Scripts

Command	Description
pnpm start	Start app in development mode
pnpm test	Run unit tests
pnpm test:e2e	Run end-to-end tests
pnpm lint	Run ESLint
pnpm typecheck	Run TypeScript type checking
pnpm package	Package the app (no installer)
pnpm make	Build distributable installers

Building

# Package for current platform
pnpm package

# Create distributable installers (DMG, EXE, DEB, RPM)
pnpm make

Build artifacts are output to the out/ directory.

Tech Stack

• Framework: Electron with Electron Forge
• Language: TypeScript (strict mode)
• Bundler: Vite
• Markdown: markdown-it
• Syntax Highlighting: highlight.js
• Diagrams: Mermaid
• File Watching: chokidar
• Testing: Vitest + Playwright

Project Structure

src/
├── main/           # Main process (Node.js)
│   ├── window/     # BrowserWindow management
│   ├── ipc/        # IPC handlers
│   └── services/   # File, theme, and watcher services
├── preload/        # Preload scripts (secure bridge)
├── renderer/       # Renderer process (UI)
│   └── components/ # UI components
├── plugins/        # Markdown plugin system
│   ├── core/       # Plugin manager and renderer
│   └── builtin/    # GFM, syntax highlight, Mermaid
└── shared/         # Shared types, constants, errors

License

GPL-3.0