A modern, browser-based markdown viewer designed for local development and reading of markdown files.

Edit your markdown files in your favorite editor while MarkdownViewer automatically refreshes in your browser, giving you instant visual feedback as you write. Perfect for drafting documentation, README files, or any markdown content. Also serves as a clean, distraction-free way to read rendered markdown files.

🚀 Try the app online - No installation required!

• Preview Markdown files with GitHub Flavored Markdown support
• Auto-reload - automatically refreshes when your markdown file changes (Chrome/Edge)
• Mermaid diagrams - renders flowcharts, sequence diagrams, and more
• Syntax highlighting - beautiful code blocks with syntax coloring
• Light/dark themes - matches your system preference or toggle manually

# Install dependencies
npm i

# Start the development server
npm run dev

# Open http://localhost:5173 in your browser
# Click "Open Markdown File" and select a .md file to preview

npm run build

The production build will be in the dist/ directory.

A companion VS Code extension (mdviewer-vscode) renders markdown in a panel beside your editor. It is not yet published to the VS Code Marketplace and has no formal versioning — build and install it manually from source.

• Open a .md file in VS Code
• Press Cmd+Shift+M (macOS) / Ctrl+Shift+M (Windows/Linux), or click the preview icon in the editor title bar, or run MD Viewer: Preview Current File from the command palette
• The panel opens beside your editor and updates automatically as you switch between .md files or make unsaved edits
• Theme follows VS Code's active color theme (light/dark)

Requires the monorepo dependencies to be installed first (pnpm install from the repo root).

# Build the extension bundles
make vsce-build

# Package into a .vsix file
make vsce-package

# Install into your VS Code
make vsce-install

Reload VS Code after installing. To uninstall, find MD Viewer in the Extensions sidebar and click Uninstall.